子组件通知父组件,可以通过自定义事件官网传送门,来进行操作,下面是代码
child.vue
<template>
<div>
<h4>{{FatherData}}</h4>
<button @click="changeData">通知父组件改变值</button>
</div>
</template>
<script>
export default {
data(){
return{
test:'啊啊啊'
}
},
props: {
FatherData: {
type: String,
required: true
}
},
methods:{
changeData(){
this.$emit('change-child',this.test)
}
}
}
</script>
father.vue
<template>
<div>
<h4>父组件</h4>
// 此处自定义事件,采用驼峰命名
<child :FatherData="fatherData" @change-child="change"></child>
</div>
</template>
<script>
import Child from './child.vue'
export default {
components: {
Child
},
data() {
return {
fatherData: '父组件的值',
}
},
methods: {
change(val){
this.fatherData = val
}
}
}
</script>