vue2开发中实例事件总结($on,$once,$off,$emit,$root,$refs,$parent 的使用)

1.实例事件就是在构造器外部调用构造器内部的数据。

2.使用场景:比如构造器已经有一个加的方法,现在还要做一个减的方法,而我又不想动构造器里面的信息,那就可以使用实例事件了.
操作如下:

与$on对应的还有一个$once,上述代码只改一个单词$once

 app.$once('reduce',function(){
          console.log("减的方法触发了");
          this.num--
 })

结果:减的方法只执行一次.
$off关闭实例事件
关闭reduce后,减就失效了.

概述：$emit 、$on 、$once 、$off 的使用

1、vm.$emit(eventName,callback) 和vm.$on(eventName,callback) 一般结合使用。
$emit触发当前实例上的自定义事件（并将附加参数都传给监听器回调）
使用 $on 监听该事件并调用回调函数。
这两个事件方法可以结合props 属性实现父子组件双向传参。

2、vm.$once(eventName,callback) 监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。

3、**vm.$off([eventName,callback]) 用来移除自定义事件监听器。**如果没有提供参数，则移除所有的事件监听器；如果只提供了事件，则移除该事件所有的监听器；如果同时提供了事件与回调，则只移除这个回调的监听器。

demo：$emit 和$on 实现父子组件双向传参
子组建：

父组件如下

demo父子组建携带参数传值：
父组件：

子组件如下

兄弟组件中的父亲组件（🚌公共汽车）
$on的使用场景：兄弟组件之间相互传递数据。
首先创建一个Vue的空白实例（兄弟组件的桥梁）

子组件A:发送放使用$emit自定义事件把数据带过去。

子组件B:接收方通过$on监听自定义事件的callback接收数据

二、概述：vue2中$root、$refs、$parent 的使用

1、$root 可以用来获取vue的根实例，比如在简单的项目中将公共数据放再vue根实例上(可以理解为一个全局 store ),因此可以代替vuex实现状态管理；

2、$parent 属性可以用来从一个子组件访问父组件的实例，可以替代将数据以 prop 的方式传入子组件的方式；当变更父级组件的数据的时候，容易造成调试和理解难度增加；

3、在子组件上使用ref特性后，this.$refs 属性可以直接访问该子组件。可以代替事件$emit 和$on 的作用。
使用方式是通过 ref 特性为这个子组件赋予一个 ID 引用，再通过this.$refs.testId获取指定元素。
注意：$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

demo$root 属性获取根实例

在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问。例如，在这个根实例中：

// Vue 根实例

所有的子组件都可以将这个实例作为一个全局 store 来访问或使用

demo：$refs 属性获取子组件实例