vue基础-浅谈vue中$emit和$on的基本用法

1、简介：

      $on/$emit：实现了事件的定义和消费，通过事件的定义与消费分开进而实现解耦，也达到了组件之间通讯的效果。$on定义事件/并且指定时间的执行对象/函数，$emit 事件的消费。

2、示例

      $on的简单代码实例

       $emit的简单代码实例

     注意在不同的组件下需要引用相同的vue实例

import Vue from 'vue'
let bus = new Vue();
export default bus

3、使用场景

• 父子组件传值：父组件中通过on定义事件，子组件通过$emit调用父组件中的方法
• 非父子组件传值：利用同一个vue实例，重复上一步

4、实现原理

  $on(event: string | string[], callback: Function): this;
  $emit(event: string, ...args: any[]): this;

5、组件之间的通讯详见下一篇