一、组件间通信概念

开始之前，我们把组件间通信这个词进行拆分

  • 组件
  • 通信

都知道组件是vue最强大的功能之一，vue中每一个.vue我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上，任何信息的交通都是通信组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的。

二、组件间通信分类

组件间通信分类可以分成以下几类：

  • 父子组件通信
  • 兄弟组件通信
  • 祖孙与后台组件通信
  • 非关系组件间通信

image.png

三、组件间通信的方案

vue中常规的通信方案如下：

  • 通过props传递
  • 通过$emit触发自定义事件
  • 使用ref
  • EventBus
  • $parent 或 $root
  • attrs 与 listeners
  • Provide 与 inject

  • Vuex

    1、props传递数据

    image.png

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

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

Children.vue

  1. props: {
  2.   name: String,
  3.   age: {
  4.     type: Number,    // 接收类型为数值
  5.     default: 18,     // 默认值为18
  6.     require: true    // age属性必须传递
  7.   }
  8. }

Father.vue

  1. <Children name="jack" age=18 />

2、$emit 触发自定义事件

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

Children.vue

  1. this.$emit('add', good)

Father.vue

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

3、ref

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

Father.vue

  1. <Children ref="foo" />
  3. this.$ref.foo    // 获取子组件实例，通过子组件实例拿到对应数据

4、EventBus

  • 使用场景：兄弟组件传值
  • 创建一个中央事件总线EventBus
  • 兄弟组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
  • 另一个兄弟组件通过$on监听自定义事件

Bus.js

  1. 间总线类  
  2. class Bus {  
  3.   constructor() {  
  4.     this.callbacks = {};   // 存放事件的名字  
  5.   }  
  6.   $on(name, fn) {  
  7.     this.callbacks[name] = this.callbacks[name] || [];  
  8.     this.callbacks[name].push(fn);  
  9.   }  
  10.   $emit(name, args) {  
  11.     if (this.callbacks[name]) {  
  12.       this.callbacks[name].forEach((cb) => cb(args));  
  13.     }  
  14.   }  
  15. }  
  17. // main.js  
  18. Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上  
  19. // 另一种方式  
  20. Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

Children1.vue

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

Children2.vue

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

5、$parent

  • 使用场景：通过共同祖辈$parent和$children搭建通信桥梁
  • 子实例通过this.$parent访问父实例，子实例被推入父实例的$children数组里
  • 官网上并不推荐这种方法，更多是作为访问组件的应急方法

  • 这里不过多阐述了，若有兴趣可阅读$parent和$children构建通讯

    6、$attrs 与 $listeners

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

  • 设置批量向下传属性$attrs和 $listeners
  • 包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
  • 可以通过 v-bind=”$attrs” 传⼊内部组件 ```javascript // child：并未在props中声明foo

    {{$attrs.foo}}

// parent 

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

7、provide 与 inject

  • 在祖先组件定义provide属性，返回传递的值
  • 在后代组件通过inject接收组件传递过来的值

祖先组件

  1. provide() {
  2.   return {
  3.     foo: 'foo'
  4.   }
  5. }

后代组件

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

8、Vuex

  • 使用场景：复杂关系的组件数据传递
  • Vuex作用相当于一个用来存储共享变量的容器

image.png

  • state用来存储共享变量
  • getter，可以增加一个getter派生状态，（相当于store中的计算属性），用来获得共享变量的值
  • mutations用来存放修改state的方法

  • actions也是用来存放修改state的方法，不过action是在mutations的基础上进行的，常用来做一些异步操作

    小结

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

  • 兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递
  • 祖先与后代组件数据传递可选择$attrs与listeners或者provide与inject
  • 复杂关系的组件数据传递可以通过vuex存放共享的变量