vue组件间通信

本文主要介绍父->子、子->父、兄弟组件间、跨级组件间的传值方式。

一、props【父->子】

在父组件页面使用v-bind: 或 :将数据传递给子组件，子组件通过props获取父组件传递过来的值。

图1-1 父组件

图1-2 子组件

图1-3 效果

二、$attrs【父->子】

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法----$attrs；

1. $attrs：

图2-1

示例：
我们向子组件son传递5个属性，再由子组件son向孙子组件grandson传递4个属性（这4个组件不做任何处理，只是传递），son组件向grandson组件传递的那4个属性就可以使用v-bind=$attrs。

图2-2

图2-3

2. interitAttrs：

通常和$attrs配合使用。

图2-4

简单来说，使用interitAttrs: false子组件的$attrs不会被当做是html属性渲染到根元素上，防止修改html同名属性。

图2-5

图2-6

三、$emit【子->父】

在子组件页面使用this.$emit('自定义事件名', 数据);将数据传递给父组件，父组件通过@自定义事件名="事件处理方法名" 或者v-on:自定义事件名="事件处理方法名"获取子组件传递过来的值。

图3-1 子组件

图3-2 父组件

图3-3 效果

四、$listeners【子->父】

1. 简介

图4-1

2. 使用

图4-2

图4-3

若公共组件被很多组件调用且抛出的自定义事件都不同，此时就可以使用$listeners；根据父组件调用的事件去决定抛出哪个自定义事件。

图4-4

图4-5

五、EventBus【父->子、子->父、兄弟组件间、跨级组件间】

1.简介

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。更多EventBus

2. 使用

• main.js中引入EventBus(见图5-1)
• 父组件中监听并解绑事件(见图5-2)

• son组件中发送事件(见图5-3)

  
  
  图5-1
  
  
  图5-2
  
  
  图5-3

六、vuex【兄弟组件间、跨级组件间】

vuex官网

1. vuex原理

图6-1

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

2. 模块介绍

• Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
• dispatch：操作行为触发方法，是唯一能执行action的方法。
• actions：操作行为处理模块,由组件中的$store.dispatch('action 名称', data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。
• commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
• mutations：状态改变操作方法，由actions中的commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。
• state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。
• getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

3. 解决vuex刷新状态消失问题

• 第一种方法：使用localStorage/sessionSorage存储vuex数据

  
  
  图6-2
• 第二种方法(推荐)：vuex-persistedstate
  安装：npm install --save vuex-persistedstate

import Vuex from 'vuex';
// 解决刷新浏览器，数据消失问题
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);

export default new Vuex.Store({
  plugins: [createPersistedState()]
});

七、provide/inject【父 -> 子、跨级组件间】

provide / inject 官网介绍

1. 简介

vue2.2.0 新增API，这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。
provide / inject API 主要解决了跨级组件间的通信问题。官网提供了很详细的介绍，这里直接上图

图7-1

2. 使用

• 由父组件向其下的所有子组件（所有子组件指：儿子、孙子、曾孙等等）注入user数据（见图7-2）
• 子组件son向其下的所有子组件（所有子组件指：儿子、孙子、曾孙等等）注入sonUser数据（见图7-3）

• 再孙子组件grandSon中获取父组件的user数据和子组件的sonUser数据（见图7-4）。

  
  
  图7-2 父组件
  
  
  图7-3 子组件son
  
  
  图7-4 孙子组件grandson

八、$parent、$children、$refs

1. 简介

• $parent: 获取父实例。【子 -> 父】
• $children：当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。【父 -> 子】
• $refs：一个对象，持有注册过 ref 的所有 DOM 元素和组件实例。【父 -> 子】
  $parent、$children、$refs都是直接得到组件实例，使用后可以直接调用组件的方法和数据。

2. 使用

由图8-1可知，this.$children获取到的是一个vue实列数组

图8-1 $children

由图8-2可知，this.$parent获取到的是直接父实例

图8-2 $parent

由图8-3可知，this.$refs返回的是一个使用ref注册过的对象

图8-3 $refs

九、sessionStorage、localStorage【父-> 子、子->父、兄弟组件间、跨级组件间】

sessionStorage、localStorage也能实现通信，但是需要监听storage的变化，如何监听storage的变化，之前有写过这篇文章vue 监听localStorage、sessionStorage变化，这里就不赘述了。

总结

1. 父 -> 子 间的通信

• props
• $attrs
• provide/inject
• $children
• $refs
• EventBus
• sessionStorage/localStorage + storage监听

2. 子 -> 父 间的通信

• $emit
• $listeners
• EventBus
• $parent
• sessionStorage/localStorage + storage监听

3. 兄弟组件间的通信

• EventBus
• vuex
• sessionStorage/localStorage + storage监听

4. 跨级组件间的通信

• EventBus
• vuex
• provide/inject
• sessionStorage/localStorage + storage监听

参考文章

vue组件间通信的六种方式