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 上都行

注意事项

1. 在组件销毁时，会自动销毁其上面的自定义事件，但由于我们这里把自定义事件放在 Vue原型上，所以不会自动销毁其用到的自定义事件，我们可以在 beforeDestroy 中用 $off 解绑其用到的自定义事件

⑥ 消息订阅与发布（ 适用于任意组件间传值 ）

利用第三方库，例 pubsub-js ，通过subscribe 接受数据，publish 提供数据，unsubscribe 取消订阅，具体操作和 全局事件总线 相似，可以自行了解，但是有缺点，由于是第三方库，所以不支持 Vue 开发者工具（ 全局事件总线支持 ）

⑦ 插槽（ 适用于子向父传值 ）

使用插槽时，可能父组件定义的模板需要用到子组件的值，可以在子组件中 slot标签 中，:属性名 = "传递的数据"来传递数据，再在父组件中，用 scope = ‘对象名’ 来接受所有传递的数据，通过 对象名.属性名 即可拿到数据

注意事项

1. 想使用子组件数据的结构必须由template包裹，否则拿不到，即 scope属性 要写到template标签上
2. 这种也叫作用域插槽，若插槽有名字的话，父组件只能在名字相同的对应html结构中使用接受的数据

⑧ vuex（ 设用于任意组件间传值 ）

相当于在一个独立的地方，存放共享的值，其他组件可以从中读取或修改数据，组件身上会多一个$store属性，可以通过 this.$store.dispatch() 或 this.$store.commit() 来修改数据，通过this.$store.state.xxx 来读取数据

注意事项

1. 开发者工具可以监视 Mutations 中的操作，因为 Mutations 才是直接来操作数据的
2. Actions 中的方法中的 context 参数不仅有 commit 方法，还有 dispatch 方法，因此 Actions 中的方法可以调用 Actions 中的其他方法
3. 虽然官方说更改 store 中数据状态只能通过 Mutations，但事实上我们可以在 Actions 中通过 context.state.xxx 修改，甚至直接在组件中通过 this.$store.state.xxx 修改，但这样开发者工具看不到，并且降低代码可读性， 可以在创建 store 时，传入 strict: true 来开启严格模式，在严格模式下，当数据改变，且不是有 Mutations 中方法引起的，就会抛出错误
4. 创建 store 时可以加 getters 配置项，类似于计算属性，通过 this.$store.getters 获取其中数据，不能直接修改
5. 可以通过 mapState 和 mapGetters 方法来分别映射 state 和 getters 中的数据成计算属性，可以通过mapActions 和 mapMutations 方法来分别生成调用 Actions 和 Mutations 中的方法的方法（ 最后用…展开就可以了 ）
6. vuex 可以进行模块化（ 可能数据和操作过多，不利于维护 ）

⑨ provide 和 inject 函数 （ 设用于组件向其后代组件传值 ）

其后代组件不管层次结构多深，都可以接收到，组件用 provide(‘变量名’,数据) 传递数据，后代组件用 inject(‘变量名’) 接受数据