vue组件之间的通信都有哪些？
- 父子组件通信：
- Props：父组件通过props将数据传递给子组件，子组件通过props接收父组件传递的数据。
- Events：子组件通过$emit触发事件，并将数据传递给父组件，父组件通过监听子组件的事件来接收数据。
- 兄弟组件通信：
- 共同的父组件作为中介：两个兄弟组件通过共同的父组件作为中介进行通信，父组件接收一个子组件的数据，并通过props传递给另一个子组件。
- 事件总线：可以创建一个Vue实例作为事件总线，兄弟组件都可以通过该事件总线来进行事件的发布和订阅，实现通信。
- 跨层级组件通信：
- provide / inject：祖先组件通过provide提供数据，后代组件通过inject来注入数据，实现跨层级组件之间的通信。
- Vuex：使用Vuex作为状态管理库，在其中定义共享的状态，所有组件都可以访问和修改这些状态。
- 使用全局事件总线或事件总线插件：可以创建一个全局事件总线实例，或者使用第三方插件（如Vue Bus、Event Bus）来进行组件之间的通信，任何组件都可以通过事件的发布和订阅来进行通信。
- 使用 r e f s 进行父子组件的直接访问：父组件可以通过 r e f 属性给子组件命名，在父组件中可以通过 refs进行父子组件的直接访问：父组件可以通过ref属性给子组件命名，在父组件中可以通过 refs进行父子组件的直接访问：父组件可以通过ref属性给子组件命名，在父组件中可以通过refs来直接访问子组件的属性和方法。
- 使用自定义事件：组件可以使用自定义事件系统，通过 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监听自定义事件文章来源：https://www.toymoban.com/news/detail-456980.html
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); // 浪里行舟
}
}文章来源地址https://www.toymoban.com/news/detail-456980.html
**provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的**----vue官方文档 所以，上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是 浪里行舟。
到了这里，关于vue组件之间的通信都有哪些？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
