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

来源：16-2 $emit和$on用法

oldfu

2019-11-15

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

写回答

1回答

Sam

2019-11-16

已采纳

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

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

非常感谢！

2019-11-17

共1条回复

Vue Element+Node.js开发企业通用管理后台系统

基于Element的中后台课程，一套中小型企业通用的后台管理系统

2829 学习 · 1714 问题

查看课程

相似问题

实际开发中应该怎么创建express项目？

回答 1

$on和$emit