zoukankan      html  css  js  c++  java
  • vue2 broadcast和dispatch的理解

    /*
     broadcast 事件广播
     @param {componentName} 组件名称
     @param {eventName} 事件名
     @param {params} 参数
     遍历寻找所有子孙组件,假如子孙组件和componentName组件名称相同的话,则触发$emit的事件方法,数据为 params.
     如果没有找到 则使用递归的方式 继续查找孙组件,直到找到为止,否则继续递归查找,直到找到最后一个都没有找到为止。 
     */
    function broadcast(componentName, eventName, params) {
      this.$children.forEach(child => {
        const name = child.$options.name;
        if (name === componentName) {
          child.$emit.apply(child, [eventName].concat(params));
        } else {
          broadcast.apply(child, [componentName, eventName].concat([params]));
        }
      })
    }
    /* 
     * dispatch 查找所有父级,直到找到要找到的父组件,并在身上触发指定的事件。
     @param { componentName } 组件名称
     @param { eventName } 事件名
     @param { params } 参数
     */
    export default {
      methods: {
        dispatch(componentName, eventName, params) {
          let parent = this.$parent || this.$root;
          let name = parent.$options.name;
    
          while (parent && (!name || name !== componentName)) {
            parent = parent.$parent;
    
            if (parent) {
              name = parent.$options.name;
            }
          }
          if (parent) {
            parent.$emit.apply(parent, [eventName].concat(params));
          }
        },
        broadcast(componentName, eventName, params) {
          broadcast.call(this, componentName, eventName, params);
        }
      }
    };
  • 相关阅读:
    (22)C#windows打包部署
    (2)OLEDB数据库操作
    (5)C#工具箱-数据
    (21)C#VS快捷键
    (1)OracleClient数据库操作(淘汰)
    (4)C#工具箱-菜单和工具栏
    (3)C#工具箱-容器
    (2)C#工具箱-公共控件2
    (9)oracle 表的基本查询
    企鹅
  • 原文地址:https://www.cnblogs.com/cpqwebfe/p/7714600.html
Copyright © 2011-2022 走看看