广播与派发原理(基于vue实现dispatch, broadcast)

最新推荐文章于 2024-08-15 15:20:43 发布

「已注销」

最新推荐文章于 2024-08-15 15:20:43 发布

阅读量1k

点赞数

文章标签： vue 广播和派发 dispatch broadcast

本文链接：https://blog.csdn.net/qq_34295211/article/details/105681481

版权

本文介绍了广播与派发在Vue中用于祖先组件与后代组件间通信的原理，通过遍历组件树，利用$emit和$on实现组件间的事件传递。文中提供了一个包含dispatch和broadcast的mixins实现，并展示了在组件componentA、componentB和componentC之间的应用，验证了其正确性。强调了组件的创建和渲染顺序对事件监听的影响。

摘要由CSDN通过智能技术生成

广播与派发适用于有祖先关系的组件间通信，原理是通过遍历组件树,用组件名（或者其它组件唯一标识）定位到对应的组件，并在找到的组件实例中调用$emit，从而触发$on监听的事件，这样就完成了一次组件间的通信。广播是父组件遍历他下面的所有后代组件，而派发的顺序则相反，是子组件向上寻找对应的父组件。
在vue中我们可以通过this.$parent获取父组件，this.$children获取子组件，this.$options.name获取当前实例的组件名，有了这些基础知识，我们就可以来设计dispatch(派发)和broadcast(广播)方法了。
这里我们把dispatch(派发)和broadcast(广播)设计成mixins混入对象，毕竟用到他们的时候还是少数，往往开发组件库的时候我们会用到。下面是emitter.js的代码：

function broadcast (componentName, eventName, params) {
  for (let child of this.$children) {
    let name = child.$options.name
    if (name === componentName) {
      child.$emit.apply(child, [eventName, params])
    } else {
      broadcast.call(child, componentName, eventName, params)
    }
  }
}
export default {
  methods: {
    dispatch (componentName, eventName, params) {
      let parent = this.$parent || this.$root