Vue的学习总结自测（五）——详解Vue组件间通信方式、Vuex

继上文：Vue的学习总结自测（四）

本文目录

• Vue 组件间通信方式？
• Vuex

Vue组件间通信：

1. 父子组件通信
2. 隔代组件通信
3. 兄弟通信

（1）props / $emit 适用 父子组件通信

<!-- 父组件 -->
<template>
<div>
 <h1>父组件</h1>
 <child message="子组件"></child> //通过自定义属性向子组件传递数据
</div>
</template>
<script>
import Child from '../components/child.vue'
export default {
components: {Child},
}
</script>

<!-- 子组件 -->
<template>
<h3>{{message}}</h3>
</template>
<script>
export default {
 props: ['message']  //好了，这个时候message就是上面父组件传来的信息 -“子组件”
}
</script>
//这个是传数据用的，静态数据传值，动态数据传表达式，道理都一样的哈（不是方法哟！！）

（2）ref 与 $parent / $children 适用 父子组件通信
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

$parent / $children：访问父 / 子实例

（3）EventBus

（$emit / $on） 适用于 父子、隔代、兄弟组件通信
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（4）$attrs/$listeners 适用于 隔代组件通信

 $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

（5）provide / inject 适用于 隔代组件通信
祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

（6）Vuex 适用于 父子、隔代、兄弟组件通信
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

结论：

prop和$ref都是父组件向子组件通信
prop：
着重于数据的传递，它并不能调用子组件里的属性和方法。
像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
$ref：
着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。
而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。
$emit是子组件向父组件通信

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

主要包括以下几个模块：

1. State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。

2. Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

3. Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。

4. Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

5. Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

详解模块：

State:
vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据；

// 建立一个index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex);

//创建Vuex实例
const store = new Vuex.store({
	state:{
	count:1
	}
})
export default store

//任意模块
<div> {{ this.$store.state.count }}<div>

Getters：
允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果

Mutations
是唯一更改 store 中状态的方法，且必须是同步函数。在任何地方都可以修改store数据

//----任一模块提出修改数据
methods:{
addFun(){
	this.$store.commit('add')
}
}

//在index.js文件中使用mutations模块：
mutations:{
add(state){
	state.count = state.count + 1;
}
}

参考链接：https://mp.weixin.qq.com/s/kB1Ncsbccd110LSW5qnxQA