概念
Vue组件间通信的实现方式有以下几种:
- 父子组件通信:父组件可以通过props属性将数据传递给子组件,子组件可以通过$emit方法触发父组件定义的事件。
- 子组件访问根组件:可以使用provide/inject来实现子组件访问根组件的数据。
- 兄弟组件通信:可以通过一个共同的父组件作为中间媒介,将数据传递给兄弟组件。
- 使用Vuex:Vuex是Vue的状态管理库,可以集中管理组件之间的共享状态。通过mutations和actions修改和访问状态。
- 使用事件总线:可以创建一个Vue实例作为事件总线,组件间通过$ emit和$ on方法来发布和订阅事件。
- 使用$ refs访问子组件:可以通过给子组件设置ref属性,然后通过this.$ refs来访问子组件的方法和数据。
- 使用$ parent和$ children:可以通过this.$ parent来访问父组件的数据和方法,通过this.$ children来访问子组件列表。
- 使用provide/inject:类似于子组件访问根组件,但是可以在更深层次的组件中传递数据。
- 使用$ attrs和$ listeners:$ attrs包含父组件传递的所有属性,$ listeners包含所有父组件传递的事件监听器。
案例
一些常见的Vue组件间通信的实现方式及相应的案例代码:
- 父子组件通信:
父组件向子组件传递数据:
// Parent.vue
<template><div><Child :message="