vue组件之间的通信都有哪些？

组件之间的通信都有哪些？"/>

vue组件之间的通信都有哪些？

vue组件之间的通信都有哪些？

1. 父子组件通信：
   • Props：父组件通过props将数据传递给子组件，子组件通过props接收父组件传递的数据。
   • Events：子组件通过$emit触发事件，并将数据传递给父组件，父组件通过监听子组件的事件来接收数据。
2. 兄弟组件通信：
   • 共同的父组件作为中介：两个兄弟组件通过共同的父组件作为中介进行通信，父组件接收一个子组件的数据，并通过props传递给另一个子组件。
   • 事件总线：可以创建一个Vue实例作为事件总线，兄弟组件都可以通过该事件总线来进行事件的发布和订阅，实现通信。
3. 跨层级组件通信：
   • provide / inject：祖先组件通过provide提供数据，后代组件通过inject来注入数据，实现跨层级组件之间的通信。
   • Vuex：使用Vuex作为状态管理库，在其中定义共享的状态，所有组件都可以访问和修改这些状态。
4. 使用全局事件总线或事件总线插件：可以创建一个全局事件总线实例，或者使用第三方插件（如Vue Bus、Event Bus）来进行组件之间的通信，任何组件都可以通过事件的发布和订阅来进行通信。
5. 使用 r e f s 进行父子组件的直接访问：父组件可以通过 r e f 属性给子组件命名，在父组件中可以通过 refs进行父子组件的直接访问：父组件可以通过ref属性给子组件命名，在父组件中可以通过 refs进行父子组件的直接访问：父组件可以通过ref属性给子组件命名，在父组件中可以通过refs来直接访问子组件的属性和方法。
6. 使用自定义事件：组件可以使用自定义事件系统，通过 o n 、 on、 on、emit、$off等方法来进行通信。

1.Props

如果props传入的数据和子组件的data里面定义的数据一样，那么会发生冲突，会以props的为主

如果props传递的是一个函数,那么子组件使用props接受函数，然后调用并传入数据，父组件也可以接收到子组件传递给父组件的数据。实现子组件给父组件传递数据

2. $emit 触发自定义事件

父组件

<Children @add="cartAdd($event)" />  

子组件

this.$emit('add', good)  

3.ref

• 父组件在使用子组件的时候设置ref
• 父组件通过设置子组件ref来获取数据

父组件

<Children ref="foo" />  this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据 

接下来是兄弟组件传递数据

4.EventBus

创建一个中央事件总线EventBus

兄弟组件通过$emit触发自定义事件，$emit第二个参数为传递的数值

另一个兄弟组件通过$on监听自定义事件

5.provide/inject

// A.vue
export default {provide: {name: '浪里行舟'}
}

// B.vue
export default {inject: ['name'],mounted () {console.log(this.name);  // 浪里行舟}
}

inject: [‘name’],
mounted () {
console.log(this.name); // 浪里行舟
}
}

**provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的**----vue官方文档 所以，上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是 浪里行舟。