子组件传值给父组件（vue）

子组件通知父组件，可以通过自定义事件官网传送门，来进行操作，下面是代码

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>