1. 父子组件通信
- 基本方法(推荐):
a. 父 => 子:使用prop向子组件传递静态或动态的数据,如:<blog-post :title="vue"></blog-post>
,注意传递的数据需要在子组件用props属性接收。
b. 子 => 父:使用 v-on:event 和 $emit。父组件使用 v-on 或 @ 向子组件传递事件,再在子组件中调用 $emit 触发事件即可,注意传递的事件不需要在子组件的props中接收。 - 父子组件链(不推荐):
a. 父 => 子:使用this.$children
访问或递归访问其子孙组件。
b. 子 => 父:使用this.$parent
访问或递归访问其父级组件,直至根组件。 - 子组件索引:
a. 父 => 子:用ref
属性为子组件指定一个索引名称,在父组件中通过this.$ref[name]
访问ref为name的子组件。
2. 爷孙组件通信
- 父子嵌套:
a. 使用嵌套的父子通信进行层级传递即可。 - 依赖注入:
a. 父级组件定义provide
函数返回提供的数据,子孙后代组件使用inject
属性接收上层组件provide的数据。
3. 任意组件通信
- 事件总线eventBus:
-
let bus = new Vue(); Vue.prototype.bus = bus
创建一个空的Vue实例,挂载到Vue原型上作为中央事件总线; - 在需要传值的组件中使用
this.bus.$emit('event', data)
触发一个自定义事件,并传递数据; - 在需要接收数据的组件中使用
this.bus.$on('event', data => { })
监听自定义事件,并在回调函数中处理传递过来的数据。
-
- 使用vuex
- 创建一个全局state管理的 store;
- 组件中使用
this.$store.state
访问 state; - 组件中使用
commit mutation
或者dispatch action
来更新store里的数据。