diyi-ui/src/mixins/emitter.js

diyi A Vue.js UI

/**
 * @param {string} componentName 组件名称
 * @param {string} eventName 事件名称
 * @param {any} params 参数
 */
function broadcast (componentName, eventName, params) {
    this.$children.forEach(child => {
        // 拿到子组件的name
        const name = child.$options.name

        // 如果子组件的name === 父组件的name 就把子组件的$emit this指向为当前子组件，并吧参数传递进去，如果不相等，就把this指向为子组件，并传递参数
        if (name === componentName) {
            child.$emit.apply(child, [eventName].concat(params))
        } else {
            broadcast.apply(child, [componentName, eventName].concat([params]))
        }
    })
}
export default {
    methods: {
        /**
         * @param {string} componentName 组件名称
         * @param {string} eventName 事件名称
         * @param {any} params 参数
         */
        dispatch (componentName, eventName, params) {
        // 向上查找父组件，如果为null 就是根元素即$root
            var parent = this.$parent || this.$root
            // 拿到父组件的组件name
            var name = parent.$options.name
            console.log(parent)
            console.log(name)
            console.log(parent, !name, name !== componentName)
            while (parent && (!name || name !== componentName)) {
                console.log(parent && (!name || name !== componentName))
                parent = parent.$parent

                if (parent) {
                    name = parent.$options.componentName
                }
            }
            if (parent) {
                parent.$emit.apply(parent, [eventName].concat(params))
            }
        },
        broadcast (componentName, eventName, params) {
            broadcast.call(this, componentName, eventName, params)
        }
    }
}