Vue 组件间通信的几种方式？

在Vue中，存在多种方式来实现组件之间的通信，下面是几种常见的方式：

1. Props/Events：父组件通过props向子组件传递数据，子组件通过触发事件将数据传递给父组件。

   • 父组件向子组件传递数据：

     <child-component :prop-name="data"></child-component>
     

   • 子组件接收父组件传递的数据：

     Vue.component('child-component', {
            
       props: ['propName'],
       // ...
     });
     

   • 子组件向父组件传递数据：

     this.$emit('event-name', data);
     

2. 自定义事件：通过使用Vue实例的$on`和`$emit方法在任意组件间进行事件通信。

   • 监听事件：

     this.$on('event-name', handler);
     

   • 触发事件：

     this.$emit('event-name', data);
     

3. EventBus：使用Vue的事件总线来实现组件之间的通信。可以通过创建一个全局的Vue实例并在组件间共享来实现事件的订阅和发布。

   • 创建事件总线实例：

     Vue.prototype.$bus = new Vue();
     

   • 在组件中订阅事件：

     this.{
            mathJaxContainer[1]}on('event-name', handler);
     

   • 在组件中发布事件：

     this.{
            mathJaxContainer[2]}emit('event-name', data);
     

4. Vuex：适用于更大型应用的状态管理模式，通过创建一个全局的状态管理仓库来实现组件之间的通信。

   • 在state中定义状态：

     state: {
            
       data: null
     }
     

   • 在组件中获取和修改状态：

     // 获取状态
     this.$store.state.data
     // 修改状态
     this.$store.commit('mutation-name', data);
     

   • 在组件中提交mutation：

     this.$store.commit('mutation-name', data);
     

5. $refs：使用ref属性来获取子组件的引用，并直接调用子组件的方法或访问子组件的属性。

   • 在组件上添加ref：

     <child-component ref="childRef"></child-component>
     

   • 在父组件中使用ref：

     this.$refs.childRef.methodName();
     

这些方法可以根据应用的需求来选择适合的方式。对于简单的父子组件间通信，可以使用props和events；如果组件之间的通信比较复杂，可以考虑使用事件总线或Vuex来管理状态；而对于简单的组件引用和调用，可以使用$refs。