Vue 中常见的通信组件

在 Vue 中，常见的通信组件方式包括以下几种：

1. 父向子组件通信：

   • 通过 props 向子组件传递数据。父组件在使用子组件时，通过属性的形式将数据传递给子组件。
     例如：

    <ChildComponent :message="parentMessage" />

子组件通过 props 选项接收：

    export default {
      props: ['message']
    }

2. 子向父组件通信：

   • 子组件通过 $emit 触发自定义事件，并向父组件传递数据。
     例如，在子组件中：

    this.$emit('customEvent', data);

父组件监听该事件：

    <ChildComponent @customEvent="handleChildEvent" />

3. 非父子组件通信（兄弟组件或跨级组件） ：

   • 使用 Vuex 状态管理库，将共享的数据存储在 Vuex 的 state 中，通过 mutations 更改数据，组件通过 getters 获取数据。

   • 使用 EventBus（事件总线），创建一个全局的 Vue 实例作为事件中心，组件通过 $emit 触发事件，其他组件通过 $on 监听事件。
     例如：

    // 创建事件总线
    const eventBus = new Vue();
    // 发送事件
    eventBus.$emit('eventName', data);
    // 接收事件
    eventBus.$on('eventName', (data) => {
      // 处理数据
    });

这些通信方式各有特点和适用场景，您可以根据具体的项目需求选择合适的方式来实现组件之间的通信。