3、provide / inject
描述：
这对选项需要一起使用，父组件使用 provide 向下提供数据，其下所有子组件都可以通过inject注入。不管中间隔了多少代，都可以注入多个来自不同父级提供的数据
- provide 选项是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性
- inject 选项是一个字符串数组，或一个对象
使用方法：
// 父组件 <template> <div> <com-a></com-a> </div> </template> <script> import ComA from './a'; export default { 'name': 'home', 'components': {ComA}, provide() { return { 'a': 'Hello', 'show': val => !val }; } }; </script>
// 子组件 <template> <div> <el-button @click="showFn(textShow)">点击我切换下面文字展示及隐藏</el-button> <div v-if="textShow">我是一段随意被操控的文字{{a}}</div> </div> </template> <script> export default { 'name': 'ComA', data() { return {'textShow': true}; }, 'inject': [ 'a', 'show' ], 'methods': { showFn(val) { this.textShow = this.show(val); } } }; </script>
如果是在app.vue 文件（根文件）里面全局注册信息，就可以在整个路由里面去引用 （类似于全局的数据管理vuex）
<template> <div> <router-view></router-view> </div> </template> <script> export default { name: 'app', provide(){ return { app: this } } } </script>
接下来任何组件只要通过inject注入app的话，都可以直接通过this.app.xx 来访问app.vue 的所有实例。
4、$parent / $children
描述：
$parent 可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，来替代将数据以 prop 的方式传入子组件的方式
<template> <div class="b-content"> <div>我是子组件</div> <span>{{msgText}}</span> </div> </template> <script> export default { 'name': 'childComp', data() { return { 'msgText': '', 'childMsg': '来自子元素的呐喊' }; }, created() { this.msgText = this.$parent.parentMsg; // MsgText: 来自父组件的呵呵 } }; </script>
$children可以遍历全部子组件，需要注意 $children 并不保证顺序，也不是响应式的。
<template> <div class="b-content"> <div>我是父组件</div> <child-comp></child-comp> </div> </template> <script> import childComp from './child'; export default { 'name': 'parentComp', data() { return {'parentMsg': '来自父组件的呵呵'}; }, 'components': {childComp}, mounted() { // 读取子组件数据，注意$children子组件的排序是不安全的 console.log(this.$children[0].childMsg); // 来自子元素的呐喊 } }; </script>
5、$root & refs
描述：
$root 属性是在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问。例如，在这个根实例中：
// Vue 根实例 new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } }, methods: { baz: function () { /* ... */ } } })
所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。
// 获取根组件的数据 this.$root.foo // 写入根组件的数据 this.$root.foo = 2 // 访问根组件的计算属性 this.$root.bar // 调用根组件的方法 this.$root.baz()
$refs属性当你需要在 JavaScript 里直接访问一个子组件。你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。 一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。例如：
<my-component ref="childrenCompA"></my-component>
访问子组件：this.$refs.childrenCompA
6、Vuex
在做中大型的单页应用的时候，例如需要多人协作开发，全局维护登录状态等，我们可以选择vuex来进行状态管理。
state里面是存储在vuex里的数据，通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。
当需要获取多个数据时，可以通过下面这种方式：
import {mapState} from 'vuex' computed:{ ...mapState('commissionSetting', [ 'listData' ]) }
不是所有的状态都适合放在vuex里面，有些状态只属于单个组件，所以还是要视情况来定。
mutations 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
const mutations = { updateListData(state, payload){ state.listData = payload }
不能直接调用updateListData，需要以相应的 type 调用 store.commit 方法：
store.commit('updateListData', data)
actions 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。
写一个简单的action:
async getListAction({commit}, params){ const result = await getList(params) const {code, message, data} = result if(code === SUCCESS && data){ // 提交更改数据 commit('updateListData', data.rows) }else{ vueInit.$Message.error({ content: message || '请您稍后再试~' }); } return result },
Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：
- 应用层级的状态应该集中到单个 store 对象中。
- 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
- 异步逻辑都应该封装到 action 里面。
只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。
最后
生命不息，学习不止。新的知识点层出不穷，对于咱们开发者来说，最重要的是学会并且能应用到实际项目中。
