vue如何实现父子通信

父子组件通信方法

父组件向子组件传递数据
使用props属性实现父向子传值。父组件通过v-bind绑定数据，子组件通过props接收。

父组件模板示例：

<ChildComponent :message="parentMessage" />

子组件脚本示例：

export default {
  props: ['message'] // 或使用对象形式定义类型校验
}

子组件向父组件传递数据
通过自定义事件实现子向父传值。子组件使用$emit触发事件，父组件通过v-on监听。

子组件脚本示例：

this.$emit('update', newValue);

父组件模板示例：

<ChildComponent @update="handleUpdate" />

双向数据绑定简化
结合v-model语法糖简化父子双向通信。父组件使用v-model，子组件通过model选项配置。

父组件模板示例：

<ChildComponent v-model="parentData" />

子组件脚本示例：

export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  props: ['value']
}

高级通信方式
对于深层嵌套组件，可使用provide/inject跨层级传递数据。

父组件脚本示例：

export default {
  provide() {
    return {
      sharedData: this.sharedData
    }
  }
}

子组件脚本示例：

export default {
  inject: ['sharedData']
}

事件总线或Vuex
对于非父子组件或复杂状态管理，建议使用Vuex或事件总线（Event Bus）。

事件总线示例：

// 创建Event Bus
const bus = new Vue();

// 发送事件
bus.$emit('eventName', data);

// 接收事件
bus.$on('eventName', (data) => {});