ElementUI源码之--emitter.js实现多层级父子组件间事件广播和事件派发

2022-02-24 21:01:33 阅读：329 来源： 互联网

标签：parent ElementUI -- componentName eventName 源码 params 组件 emit

概要

ElementUI作为一个流行易用的前端UI组件库，受到了广大前端程序开发者的青睐。因此我们很有必要了解一下ElementUI有哪些值得我们学习地方，将值得借鉴的设计思想应用到自己的业务场景中。本系列本章旨在解构ElementUI源码的架构逻辑与组件设计细节，希望同学们可以get有用的技能，我是Elwin，欢迎交流前沿技术，分享知识。

Vue中父子组件通信

读过Vue文档的同学们应该都知道父组件传值给子组件通过props属性，子组件通知父组件改变数据通过emit()方法。
例如，建立父子组件Father.vue和Son.vue:
Father.vue

<template>
  <div>
    <h1>我是父组件</h1>
    <br>
    <h1>这是子组件</h1>
    <son :message="message" @changeMsg="handleChange"></son>
  </div>
</template>
<script>
import Son from './Son.vue';
export default {
  name: 'Father',
  components: {
    Son
  },
  data () {
    return {
      message: 'Hello Son'
    }
  },
  methods: {
    handleChange (msg) {
      this.message = msg;
    }
  }
}
</script>

Son.vue

<template>
  <div>
    <h1>我是子组件</h1>
    <p>这是父组件传给我的消息：{{ message }}</p>
    <button @click="handleClick">通知父组件</button>
  </div>
</template>
<script>
export default {
  name: 'Son',
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick () {
      this.$emit('changeMsg', 'Hello Father');
    }
  }
}
</script>

页面初始渲染完成，Son.vue中message的值为：Hello Son，这是父组件通过props传给子组件的，点击通知父组件按钮，message的值变为：Hello Father，这是子组件通过
emit()方法通知父组件修改的数据，这样通信的好处是单项数据流（子组件自己不能修改父组件通过props传的值）易于追踪数据的流向。

而这样的通信方式存在很多限制，如果不是组件不是父子关系，而是嵌套更深的祖孙关系乃至更深的层级关系，这时使用props和emit进行通信就会很麻烦，一层一层的通信效率非常低下，而且当业务逻辑十分复杂，这样的通信方式会给开发者造成很大的心智负担，因此现在需要一种可以直接喊话的通信方式提高效率，化繁为简，而ElementUI中就提供了相关的方法解决这一痛点，下面解释一下其实现多层级通信的实现原理。

多层级父子组件间的事件广播及事件派发功能

找到ElementUI源码中src/mixins/emitter.js文件，源码如下：

function broadcast(componentName, eventName, params) {
  /*遍历当前节点下的所有子组件*/
  this.$children.forEach(child => {
    /*获取子组件名称*/
    var name = child.$options.componentName;

    if (name === componentName) {
      /*如果是我们需要广播到的子组件的时候调用$emit触发所需事件，在子组件中用$on监听*/
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      /*非所需子组件则递归遍历深层次子组件*/
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}
export default {
  methods: {
    /*对多级父组件进行事件派发*/
    dispatch(componentName, eventName, params) {
      /*获取父组件，如果以及是根组件，则是$root*/
      var parent = this.$parent || this.$root;
      /*获取父节点的组件名*/
      var name = parent.$options.componentName;

      while (parent && (!name || name !== componentName)) {
        /*当父组件不是所需组件时继续向上寻找*/
        parent = parent.$parent;

        if (parent) {
          name = parent.$options.componentName;
        }
      }
      /*找到所需组件后调用$emit触发当前事件*/
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    /*
        向所有子组件进行事件广播。
        这里包了一层，为了修改broadcast的this对象为当前Vue实例
    */
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};

broadcast与dispatch实现了一个定向的多层级父子组件间的事件广播及和事件派发功能。完成多层级分发对应事件的组件间通信功能。并通过mixin的方式使用。

broadcast通过递归遍历子组件找到所需组件广播事件，而dispatch则逐级向上查找对应父组件派发事件。
broadcast需要三个参数，componentName（组件名），componentName（事件名称）以及params（数据）。根据componentName深度遍历子组件找到对应组件emit事件eventName。
dispatch同样道理，需要三个参数，componentName（组件名），componentName（事件名称）以及params（数据）。根据componentName向上级一直寻找对应父组件，找到以后emit事件eventName。

标签：parent,ElementUI,--,componentName,eventName,源码,params,组件,emit
来源： https://www.cnblogs.com/smart-elwin/p/15933529.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ElementUI源码之--emitter.js实现多层级父子组件间事件广播和事件派发

概要

Vue中父子组件通信

多层级父子组件间的事件广播及事件派发功能