vue中$once的使用
$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 事件只会被触发一次.
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
支付宝
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。