本文主要介绍父->子、子->父、兄弟组件间、跨级组件间的传值方式。
一、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【兄弟组件间、跨级组件间】
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【父 -> 子、跨级组件间】
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监听
网友评论