Vue 实例方法-事件处理

$on

$on ( event , callback )
参数1 ：string | Array<  string >  注：数组是在2.2.0 + 中支持
参数2 ：Function  回调函数

用法：

监听当前实例上的自定义事件。
事件可以由$emit 方法触发。在回调函数中可以接收所有传入事件触发函数的额外参数

	this.$on('pay',(arg)=>{
	    console.log(arg) // ==> ￥100
	})
	// 调用
	this.$emit('pay','￥100')

具体实现：

创建一个空白的Vue 实例，来作为数据的临时存储空间（作为兄弟之间的桥梁），基于官方API的事件分发方法（$on，$emit）实现各个组件之间的数据同步与共享。

$once

$once ( event , callback )
参数1 ：string 
参数2 ：Function  回调函数

用法：监听一个自定义事件，但是只能触发一次，一旦被触发之后，监听器随之被移除。

	<template>
	    <button @click="$emit('preview'))" ></button>
	</template>
	<script>
	    mounted(){
	    	// $once 可以为同一个事件绑定多个回调函数，出发时会按照绑定顺序依次执行。
	     this.$once('preview',()=>{
	         console.log(1)
	     })
	      this.$once('preview',()=>{
	         console.log(2)
	     })
	    } 
	 </script>

$off

$off ( event , function)

 event  string | stringArray 同1 见上
 Function  // 所要移除的自定义事件的回调函数

用法：

	移除自定义事件监听器。
	如果没有提供参数，则移除所有的事件监听器；
	如果只提供了事件，则移除该事件所有的监听器；
	如果同时提供了事件与回调，则只移除这个回调的监听器。

// 组件 
	<Table @getData="getTableData" />
	
	bedoreDestory(){
	    this.$off() // 移除所有自定义事件
	    this.$off('getTableData') // 移除所有@getTableData事件
	    this.$off('getTableData',this.getTableData) //只移除getTableData回调
	}

$emit

$emit  ( event , callback ) // 事件分发

// 子组件
	<button @click="addPersonalCount" ></button>
	
	methods:{
	    addPersonalCount(){
	        // 将数据通过事件携带给父组件
	        this.$emit('giveParent',{count:11})
	    }
	}
	
	// 父组件
	<template>
	     <tabs @giveParent="getCount" />
	 </template>
	 
	 methods:{
	     getCount(arg){
	         consoel.log(arg) // {count:11}
	     }
	 }