前言

组件是 vue.js最弱小的功用之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互援用。普通来说，组件可以有以下几种关系：

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系(能够隔多代)。

针对不同的运用场景，如何选择行之有效的通讯方式?这是我们所要讨论的主题。本文总结了vue组件间通讯的几种方式，如props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和provide/inject，以深刻易懂的实例讲述这其中的差别及运用场景，希望对小同伴有些许协助。

本文的代码请猛戳github博客，纸上得来终觉浅，大家入手多敲敲代码!

办法一、props/$emit

父组件A经过props的方式向子组件B传递，B to A 经过在 B 组件中 $emit, A 组件中 v-on 的方式完成。

1.父组件向子组件传值

接上去我们经过一个例子，阐明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"]

//App.vue父组件

总结：父组件经过props向下传递数据给子组件。注：组件中的数据共有三种方式：data、props、computed

2.子组件向父组件传值(经过事情方式)

接上去我们经过一个例子，阐明子组件如何向父组件传递值：当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，完成子组件向父组件值的传递。

// 子组件

// 父组件

总结：子组件经过events给父组件发送音讯，实践上就是子组件把本人的数据发送到父组件。

办法二、$emit/$on

这种办法经过一个空的Vue实例作为中央事情总线(事情中心)，用它来触发事情和监听事情,巧妙而轻量地完成了任何组件间的通讯，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的形状管理处置方案vuex。

1.详细完成方式：

var Event=new Vue();

Event.$emit(事情名,数据);

Event.$on(事情名,data => {});

2.举个例子

假定兄弟组件有三个，辨别是A、B、C组件，C组件如何获取A或许B组件的数据

$on 监听了自定义事情 data-a和data-b，由于有时不确定何时会触发事情，普通会在 mounted 或 created 钩子中来监听。

办法三、vuex

1.简明引见Vuex原理

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

vuex 是 vue 的形状管理器，存储的数据是照应式的。但是并不会保存起来，刷新之后就回到了初始形状，详细做法应该在vuex里数据改动的时分把数据拷贝一份保存到localStorage外面，刷新之后，假设localStorage里有保存的数据，取出来再交流store里的state。

let defaultCity = "上海" 

try {   // 用户封锁了本地存储功用，此时在外层加个try...catch 

  if (!defaultCity){ 

    defaultCity = JSON.parse(window.localStorage.getItem('defaultCity')) 

  } 

}catch(e){} 

export default new Vuex.Store({ 

  state: { 

    city: defaultCity 

  }, 

  mutations: { 

    changeCity(state, city) { 

      state.city = city 

      try { 

      window.localStorage.setItem('defaultCity', JSON.stringify(state.city)); 

      // 数据改动的时分把数据拷贝一份保存到localStorage外面 

      } catch (e) {} 

    } 

  } 

}) 

这里需求留意的是：由于vuex里，我们保存的形状，都是数组，而localStorage只支持字符串，所以需求用JSON转换：

JSON.stringify(state.subscribeList);   // array -> string 

JSON.parse(window.localStorage.getItem("subscribeList"));    // string -> array  

办法四、$attrs/$listeners

1.简介

多级组件嵌套需求传递数据时，通常运用的办法是经过vuex。但假设仅仅是传递数据，而不做中间处置，运用 vuex 处置，不免有点大材小用。为此Vue2.4 版本提供了另一种办法----$attrs/$listeners

(责任编辑：admin)