Vue组件之间的传递通信

Vue组件之间的通信可以通过多种方式实现，包括但不限于以下几种：

一、父子组件通信

1.父组件向子组件传递数据：

使用props传递数据

在Vue中，父组件可以通过props向子组件传递数据。props是子组件的自定义属性，用于接收父组件传递过来的数据。

父组件代码示例：

子组件代码示例： 

---

 在这个例子中，父组件通过props向子组件传递了一个名为message的数据，子组件接收后，在模板中显示了这个数据。

子组件 (ChildComponent.vue)

在这个例子中，子组件 ChildComponent 声明了一个名为 message 的 prop，并指定了它的类型为 String，同时设置为 required，意味着父组件必须传递这个 prop。

父组件 (ParentComponent.vue)

在父组件 ParentComponent 中，我们引入了子组件 ChildComponent，并在模板中使用了它。我们通过属性 message 向子组件传递了一个字符串 "Hello from Parent!"。

使用动态 Props

props 也可以是动态的，这意味着你可以基于父组件的数据或计算属性来传递值。

在这个例子中，父组件使用 :message（等同于 v-bind:message）来绑定一个动态值 dynamicMessage 到子组件的 message prop。

Props 验证

你还可以为 props 提供验证，以确保传递给子组件的数据是符合预期的。

props: {  
  message: {  
    type: String,  
    required: true,  
    validator: function(value) {  
      // 这个值必须匹配正则表达式 /^hello/  
      return /^hello/.test(value);  
    }  
  }  
}

在这个例子中，validator 函数用于检查传递的 message 是否以 "hello" 开头。

使用 props 是 Vue.js 组件间通信的一种非常常见和推荐的方式，因为它使得组件更加解耦和可重用。

使用$refs传递数据

$refs是Vue实例的一个属性，它提供了对子组件实例的直接访问。父组件可以通过$refs访问子组件的实例，从而直接调用子组件的方法或访问其数据。

使用v-model指令

虽然v-model通常用于表单输入和组件之间的双向数据绑定，但它也可以用于父传子。在父组件中使用v-model绑定子组件的某个prop，子组件内部需要触发input事件来更新父组件的数据。

使用$parent

使用$parent，子组件可以访问父组件的数据、计算属性、方法以及其它实例属性。但是，通常并不推荐频繁使用$parent，因为它破坏了组件的封装性，使得组件之间的耦合度变高，不利于代码维护和测试。

2.子组件向父组件传递数据：

使用$emit方法

子组件通常通过触发事件向父组件传递数据。在Vue中，子组件可以使用$emit方法触发一个自定义事件，并传递数据作为参数。父组件可以通过监听这个事件来接收数据。

子组件代码示例：

 父组件代码示例：

provide/inject

祖先组件可以通过provide选项提供数据，子孙组件可以通过inject选项注入这些数据。这种方法主要用于高阶组件库的开发。

---

二、非父子组件通信

事件总线（Event Bus）：

通过创建一个全局的Vue实例作为事件总线，在组件中通过$emit和$on来触发和监听事件。

创建一个新的 Vue 实例作为事件总线，并在需要通信的组件中引入它。

// event-bus.js 
import Vue from 'vue'; 
export const EventBus = new Vue();

然后，在需要发送事件的组件中：

// ChildComponent.vue 
import { EventBus } from './event-bus.js'; 


export default { 
methods: { 
sendToOtherComponent() { 
        EventBus.$emit('event-name', 'data to send'); 
        } 
    } 
};

在需要接收事件的组件中：

// OtherComponent.vue  
import { EventBus } from './event-bus.js';  
  
export default {  
  created() {  
    EventBus.$on('event-name', this.handleEvent);  
  },  
  beforeDestroy() {  
    EventBus.$off('event-name', this.handleEvent);  
  },  
  methods: {  
    handleEvent(data) {  
      console.log('Received data from ChildComponent:', data);  
    }  
  }  
};

Vuex 状态管理

对于更复杂的状态管理需求，Vuex 是一个很好的选择。Vuex 是一个专门为 Vue.js 设计的状态管理库，它允许你在多个组件之间共享状态，并通过提交 mutations 来改变状态。

可以看我的这篇文章：Vuex介绍-CSDN博客

三、兄弟组件通信

共享父组件状态：如果两个兄弟组件有共同的父组件，可以将需要共享的数据作为父组件的状态，然后通过props传递给两个兄弟组件。

也可以使用事件总线（Event Bus）和Vuex