vue3父子组件通信

应用场景

子组件中的值发生改变时，向父组件传递一个标识符代表子组件的值已被改变，通过这个标识符对业务进行不同的处理。

基本思路

在子组件被监听的组件上绑定@change事件，@change调用传参方法向父组件传参，在父组件本地定义一个的参数在接收到子组件时赋值，如果父组件的值为undenfine则代表子组件未改变。
就像盖章一样，我改过一次就盖一个章，有章就是改过了，没有章就是没改过。

但是这样会造成一个问题，如果用户改了之后又改回来，点击触发事件依然会判定是修改过。所以我们这里主要讨论父子组件通信的问题，给大家一些思路。

子组件

<被监听的组件 @change="isChanged">
import { reactive } from 'vue'
const emit = defineEmits(['getData'])
const isChanged = () => {
        emit('getData', true)
    }

父组件

<子组件 @get-data="getData"></SaveForm>
 const getData = (flag: boolean) => {
        console.log(flag)
    }

每当组件被修改时都会自动触发getData函数往父组件传参，子组件中的 @get-data只需要与后面的函数名对应即可。例如： @get-child-data=”getChildData也可以，注意驼峰命名。