在实际的业务代码开发中，$on和$emit有哪些应用场景

Question

KaTeX parse error: Expected 'EOF', got '和' at position 3: on和̲emit有哪些应用场景

Answer 1

Sam 2019-11-16 20:23:35

你好，主要应用场景是在基础组件的开发中，目的是为了降低组件之间的耦合度，提升组件的复用程度。这里举一个实例：

element-ui 的 el-form 表单组件中，每添加一个 el-form-item 表单项时，会在 el-form-item 的 mounted 生命周期中调用：

this.dispatch('ElForm', 'el.form.addField', [this]);

这里的 this.dispatch 方法核心是调用了父组件的 $emit 方法发布事件：

parent.$emit.apply(parent, [eventName].concat(params));

而在 el-form 的 created 生命周期中定义了事件的消费方法：

this.$on('el.form.addField', (field) => {
  if (field) {
    this.fields.push(field);
  }
});

该用法的用途是每增加一个表单项时，都会将其保存到 this.fileds 数组中，这就是在实际场景的应用，如果不用这种方法，我们必须在父组件中暴露一个方法给子组件调用，但是通过 $emit 和 $on 就可以让两个组件之间的耦合消除，el-form-item 只负责 $emit el.form.addField 事件，而不知道哪个方法会进行消费，el-form 只负责定义 el.form.addField 的消费方法，而不知道哪个方法会进行 $emit，这样就使得两个组件的耦合度降低了

• 提问者 oldfu #1

  非常感谢！