Vue 事件,实例方法

$on 在当前实例 创建一个事件,和v-on差不多
$once 在当前实例 创建一个只能触发一次的事件 , 触发后事件被销毁(移除)
$off 移除 当前实例的事件
  如果没有参数,则移除 当前实例 全部事件
  如果只提供了事件名,则移除 当前实例 所有该事件名的事件
  如果同时提供了事件名与回调函数, 则只移除 当前实例 的这个回调函数的监听器(事件)
$emit 触发 当前实例 的事件 ,附加参数都会传给监听器(事件)回调,
  第二个参数会传递到$event
  事件中的回调函数不建议f()这样写,这样写$emit的附加参数传不进去
    你也可以f($event)这样写,不过建议直接 f ,怕把函数当作变量的话可以加个前缀f_函数名

简单例子:

<button @click="$on('a',  ()=> {console.log('无限次')})">创建a</button>
<!--可以创建多个事件名一样的事件-->
<button @click="$on('a',  ()=> {console.log('无限次+1')})">创建a</button>
<button @click="$once('b',()=>{console.log('就一次')})">创建b</button>
<br/>
<button @click="$emit('a')">触发a</button>
<button @click="$emit('b')">触发b</button>
<br/>
<button @click="$off()">移除全部</button>
<button @click="$off('a')">移除a</button>
<button @click="$off('b')">移除b</button>

$off回调例子:

--组件选项--
methods:{
	f:function (v) {
		console.log("嗨!"+v);
	}
}
--模板部分--
<button @click="$on('a', ()=> {console.log('无限次')})">创建a</button>
<button @click="$on('a',f)">创建a-f</button>
<br/>
<button @click="$emit('a')">触发a</button>	 <!--触发所有a事件-->
<!--a-f输出:嗨!undefined-->
<button @click="$emit('a','你好')">触发a - 附带参数</button> <!--触发所有a事件,而非只触发a-f-->
<!--a-f输出:嗨!你好-->
<br/>
<button @click="$off()">移除全部</button>
<button @click="$off('a')">移除a</button>	<!--移除所有a事件,而非不移除a-f-->
<button @click="$off('a',f)">移除a-f</button><!--移除所有的a-f事件,不移除其他a事件-->