vue组件之间的通信方式

一、什么是组件、什么是通信？

组件：在vue中，每一个.vue文件，都被称之为组件。

通信：各个组件之间的信息传递。

二、组件通信的分类有哪些？

1、父子组件之间的通信

2、兄弟组件之间的通信

3、祖孙与后代之间的通信

4、非关系组件之间的通信

 

三、组件间的通信方式

1、通过props传递

适用场景：父组件传递数据给子组件

使用方式：子组件设置props属性，定义接受父组件传递过来的参数，父组件在使用子组件标签中通过字面量来传递值。

children.vue(子组件)：

props:{
// 字符串形式
name:String // 接收的类型参数
// 对象形式
age:{
type:Number, // 接收的类型为数值
defaule:18, // 默认值为18
require:true // age属性必须传递
}
}

Father.vue(父组件)

<Children name:"jack" age=18 />

2、通过$emit触发自定义事件

适用场景：子组件传递数据给父组件

使用方式：子组件通过$emit触发自定义事件，$emit第二个参数作为传递的数值，父组件绑定监听器获取到子组件传递过来的参数。

Child.vue(子组件)：

this.$emit('add', good)

Father.vue(父组件)：

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

3、使用ref

使用方式：父组件在使用子组件时设置ref，父组件通过设置的ref来获取数据。

Father.vue(父组件)：

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

4、EventBus

使用场景：兄弟组件传值

使用方式：创建一个中央时间总线，兄弟组件通过$emit触发自定义事件，$emit第二个参数位传递的数值，另一个兄弟组件通过$on监听自定义事件。

Bus.js(中央时间总线)：

// 创建一个中央时间总线类
class Bus {
constructor() {
this.callbacks = {}; // 存放事件的名字
}
$on(name, fn) {
this.callbacks[name] = this.callbacks[name] || [];
this.callbacks[name].push(fn);
}
$emit(name, args) {
if (this.callbacks[name]) {
this.callbacks[name].forEach((cb) => cb(args));
}
}
}
// main.js
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上
// 另一种方式
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

 children1.vue:

this.$bus.$emit('foo')

children2.vue:

this.$bus.$on('foo', this.handle)

5、$parent或$root

使用方式：通过共同祖辈$parent或者$root搭建通信桥梁

兄弟组件：

this.$parent.on('add',this.add)

另一个兄弟组件：

this.$parent.emit('add')

6、$attrs 与$ listeners

使用场景：祖先传递数据给子孙

使用方式：设置批量向下传属性 $attrs 和 $listeners， 包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)，可以通过 v-bind="$attrs" 传⼊内部组件。

// child：并未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>

 

// 给Grandson隔代传值，communication/index.vue
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>
// Child2做展开
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
// Grandson使⽤
<div @click="$emit('some-event', 'msg from grandson')">
{{msg}}
</div>

7、provide 与 inject

使用方式：在祖先组件定义 provide 属性，返回传递的值， 在后代组件通过 inject 接收组件传递过来的值。

祖先组件：

provide(){
return {
foo:'foo'
}
}

后代组件：

inject:['foo'] // 获取到祖先组件传递过来的值

8、vuex

使用场景：复制关系的组件数据传递

使用方式：Vuex 作用相当于一个用来存储共享变量的容器，state 用来存放共享变量的地方，getter ，可以增加一个 getter 派生状态，(相当于 store 中的计算属性），用来获得共享变量的值，mutations 用来存放修改 state 的方法，actions 也是用来存放修改state的方法，不过 action 是在 mutations 的基础上进行。常用来做 一些异步操作。

 四、总结

1、父子关系的组件数据传递选择props与$emit进行传递，也可以选择ref。

2、兄弟关系的组件数据传递可以选择$EventBus,也可以选择$parent进行传递。

3、祖先与后代组件数据传递可选择attrs与listeners或者provide与inject。

4、复杂关系的组件数据传递可以通过vuex存放共享的变量。