$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事件-->