$once
可以给组件实例绑定一个自定义事件,但该事件只能被触发一次,触发之后随即被移除
$once的简单使用
<template> <div> <button @click="$emit('onceHander')">按钮</button> </div> </template> <script> export default { mounted() { this.$once('onceHander', () => { console.log('该事件只能够被触发一次,触发后立刻被移除11'); }); } } </script>
理解
有两个参数,第一个参数为字符串类型,
用来指定绑定的事件名称,第二个参数设置事件的回调函数。
$once可以多次为同一个事件绑定多个回调,触发时。
回调函数按照绑定顺序依次执行。
@click="$emit('onceHander')" this.$once('onceHander',()=>{})
他们配合使用
$once绑定多个回调
<template> <div> <button @click="$emit('onceHander')">按钮</button> </div> </template> <script> export default { mounted() { this.$once('onceHander', () => { console.log('该事件只能够被触发一次,触发后立刻被移除11'); }); this.$once('onceHander', () => { console.log('该事件只能够被触发一次,触发后立刻被移除22'); }); // 由于绑定了多个回调,所以这两行代码都会被执行的哈 } } </script>
once作为修饰符
<template> <div> <button @click.once="onceHander">按钮</button> </div> </template> <script> export default { methods:{ onceHander(){ //同样也会触发一次哈 console.log("XXXX") } }, } </script> onceHander 事件只会被触发一次.