vue组件间通讯
（ 只是总结，不适合没有vue基础的看，自己整理笔记总结的，如果有问题欢迎指出 ）
① ref（ 适用于子向父传值 ）
可以通过在父组件中，给子组件标签加上 ref 属性，即可拿到子组件实例对象，再watch监听子组件实例对象的值即可实现传值
② ref（ 适用于子向父传值 ）
通过组件自定义事件，在父组件中用 this.$refs.xxx.$on = 回调函数 或 @自定义事件名 = “回调函数” 为子组件绑定自定义事件，然后在子组件中用this.$emit(‘自定义时间名’, 参数1, 参数2…) 触发，数据即可作为参数传递给父组件
③ props 传数据（ 适用于父向子传值 ）
在父组件中，给子组件标签加上 :属性名 = “传递的数据”，再在子组件中 props 接受一下即可
④ props 传函数（ 适用于子向父传值 ）
传过去一个指向父组件中函数的指针，然后子组件调用，并把数据当作参数传递，这样父组件便接收到了数据
⑤ 全局事件总线（ 适用于任意组件间传值 ）
② 中是通过 ref 在同一个组件中用 $on 和 $emit ，所以限制了只能父子间。可以借助 Vue原型 是 组件实例对象的原型的原型，这样通过原型链，就所有 vm 和组件实例对象都能看到了，我们可以在上面放组件实例对象，这样我们可以借助它的 $on 和 $emit 来传递数据
为什么不直接使用 Vue原型上的 $on 和 $emit
因为如果这样我们不便于调用，直接 this.$on 或 this.$emit 调用的是组件自身的，不会向上找，但如过例在Vue原型上添加一个 $bus 存放组件实例对象，我们直接 this.$bus.$on，即可通过原型链找到，且更语义化，方便理解
中间件位置
其实这个中间件不一定要放在 Vue原型上，只要所有组件都能看到就行了，例如放在 Window 上都行
注意事项
- 在组件销毁时，会自动销毁其上面的自定义事件，但由于我们这里把自定义事件放在 Vue原型上，所以不会自动销毁其用到的自定义事件，我们可以在 beforeDestroy 中用 $off 解绑其用到的自定义事件
⑥ 消息订阅与发布（ 适用于任意组件间传值 ）
利用第三方库，例 pubsub-js ，通过subscribe 接受数据，publish 提供数据，unsubscribe 取消订阅，具体操作和 全局事件总线 相似，可以自行了解，但是有缺点，由于是第三方库，所以不支持 Vue 开发者工具（ 全局事件总线支持 ）
⑦ 插槽（ 适用于子向父传值 ）
使用插槽时，可能父组件定义的模板需要用到子组件的值，可以在子组件中 slot标签 中，:属性名 = "传递的数据"来传递数据，再在父组件中，用 scope = ‘对象名’ 来接受所有传递的数据，通过 对象名.属性名 即可拿到数据
注意事项
- 想使用子组件数据的结构必须由template包裹，否则拿不到，即 scope属性 要写到template标签上
- 这种也叫作用域插槽，若插槽有名字的话，父组件只能在名字相同的对应html结构中使用接受的数据
⑧ vuex（ 设用于任意组件间传值 ）
相当于在一个独立的地方，存放共享的值，其他组件可以从中读取或修改数据，组件身上会多一个$store属性，可以通过 this.$store.dispatch() 或 this.$store.commit() 来修改数据，通过this.$store.state.xxx 来读取数据
注意事项
- 开发者工具可以监视 Mutations 中的操作，因为 Mutations 才是直接来操作数据的
- Actions 中的方法中的 context 参数不仅有 commit 方法，还有 dispatch 方法，因此 Actions 中的方法可以调用 Actions 中的其他方法
- 虽然官方说更改 store 中数据状态只能通过 Mutations，但事实上我们可以在 Actions 中通过 context.state.xxx 修改，甚至直接在组件中通过 this.$store.state.xxx 修改，但这样开发者工具看不到，并且降低代码可读性， 可以在创建 store 时，传入 strict: true 来开启严格模式，在严格模式下，当数据改变，且不是有 Mutations 中方法引起的，就会抛出错误
- 创建 store 时可以加 getters 配置项，类似于计算属性，通过 this.$store.getters 获取其中数据，不能直接修改
- 可以通过 mapState 和 mapGetters 方法来分别映射 state 和 getters 中的数据成计算属性，可以通过mapActions 和 mapMutations 方法来分别生成调用 Actions 和 Mutations 中的方法的方法（ 最后用…展开就可以了 ）
- vuex 可以进行模块化（ 可能数据和操作过多，不利于维护 ）
⑨ provide 和 inject 函数 （ 设用于组件向其后代组件传值 ）
其后代组件不管层次结构多深，都可以接收到，组件用 provide(‘变量名’,数据) 传递数据，后代组件用 inject(‘变量名’) 接受数据