请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

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

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

正在回答

1回答

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

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,这样就使得两个组件的耦合度降低了

登录后可查看完整回答登录/注册
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信