zoukankan      html  css  js  c++  java
  • vue组件库封装 广播 $dispatch $broadcast

    $dispatch和$broadcast源代码:

    function broadcast (componentName, eventName, params) {
      this.$children.forEach(child => {
        const name = child.$options.name
        // 组件名与传入componentName一致
        if (name === componentName) {
          // 子组件触发eventName事件
          child.$emit.apply(child, [eventName].concat(params))
        } else {
                broadcast.apply(child, [componentName, eventName].concat([params])); // eslint-disable-line
        }
      })
    }
    
    export default {
      methods: {
        // 向上触发事件
        $dispatch (componentName, eventName, params) {
          // 获取父实例
          let parent = this.$parent || this.$root
          // 获取组件名
          let name = parent.$options.name
          // 递归查找与componentName一致的组件名
          while (parent && (!name || name !== componentName)) {
            parent = parent.$parent
    
            if (parent) {
              name = parent.$options.name
            }
          }
          if (parent) {
            // 组件触发eventName事件
            parent.$emit.apply(parent, [eventName].concat(params))
          }
        },
        // 向子(孙)组件发送事件
        $broadcast (componentName, eventName, params) {
          broadcast.call(this, componentName, eventName, params)
        }
      }
    }
  • 相关阅读:
    罗马数字
    逆序对
    等价串
    郊区春游
    贝壳找房函数最值
    Educational Codeforces Round 45 Editorial
    Codeforces Round #486 (Div. 3)
    checkbox保存和赋值
    oninput和onchange的区别
    cookie路径概念理解
  • 原文地址:https://www.cnblogs.com/mengfangui/p/12629173.html
Copyright © 2011-2022 走看看