Vue.js 重要知识点：组件通信

在Vue.js中，组件之间的通信是一个非常重要的概念。Vue提供了多种方式来实现组件之间的数据传递和交互。

1. 父子组件通信

父子组件之间的通信主要通过props和自定义事件来实现。

案例：父组件向子组件传递数据

        
// 父组件
<template>
  <div>
    <child-component :message= parentMessage  />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '来自父组件的消息'
    };
  }
};
</script>

// 子组件
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>
        
    

2. 兄弟组件通信

兄弟组件之间的通信可以通过共同的父组件作为中介，或者使用Vuex进行状态管理。

案例：兄弟组件通过事件总线通信

可以使用Vue的原型对象$bus来创建一个全局的事件总线，实现兄弟组件之间的通信。

        
// 在main.js中创建事件总线
Vue.prototype.$bus = new Vue();

// 兄弟组件A触发事件
this.$bus.$emit('event-name', data);

// 兄弟组件B监听事件
this.$bus.$on('event-name', (data) => {
  // 处理接收到的数据
});
        
    

3. 全局事件总线

全局事件总线是一种更为灵活的组件通信方式，它允许在任何组件之间传递事件和数据。

注意：在使用全局事件总线时，要注意及时解绑事件监听器，避免内存泄漏。

案例：使用全局事件总线进行通信

参考上面的兄弟组件通信案例，全局事件总线的使用方式与之一致。

总结：Vue.js提供了多种组件通信方式，根据实际场景选择合适的方式进行通信是开发高效Vue应用的关键。