Vue组件间通信六种方式（完整版）

媒介

组件是 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) {} 
    } 
  } 
}) 

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!