Element中的自定义事件的监听和触发

• $on $emit,普通用法是通过父组件监听事件，传入子组件，然后子组件触发

• element中在mixins/emitter.js中定义了dispatch方法

• 该方法的好处：

  • 子组件中通过该方法可以触发上游组件监听的事件，不限于父组件(因为会存在form-item嵌套的情况)

  • 无需手动传递事件（上级组件监听事件，下级组件根据上级组件的组件名找到上级组件并触发事件）

源码

从源码中摘录代码并加了注释，如下：

dispatch(componentName, eventName, params) {
    // $on $emit,普通用法是通过父组件监听事件，传入子组件，然后子组件触发
    // 这个 dispatch 方法的好处就是：
    //  1. 子组件中通过该方法可以触发上游组件监听的事件，不限于父组件(因为会存在`form-item`嵌套的情况)
    //  2. 无需手动传递事件
    console.log('this.$root==', this.$root);
    var parent = this.$parent || this.$root; // 优先parent，而后root
    var name = parent.$options.componentName;

    // 从parent开始向上找，一直找到 指定的名字为  componentName 的组件
    while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

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

典型用法

// form组件监听事件：
this.$on('el.form.addField', (field) => {
    if (field) {
        this.fields.push(field);
    }
});

// form-item组件触发事件并传参
this.dispatch('ElForm', 'el.form.addField', [this]);