zoukankan      html  css  js  c++  java
  • 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/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    pip导包CalledProcessError: Command '('lsb_release', '-a')'异常处理
    小视频去重项目思考
    Github新建分支以处理原仓库提交时"detached HEAD"的问题
    Ubuntu16.04 显卡驱动重装
    基于Python经典版成语接龙逻辑实现
    Java并发压测剔除无关日志
    优雅解决jar包内资源文件读取问题
    基于ansj_seg的分词实现
    javacv之于视频/GIF解帧及重新拼接生成GIF实现
    python图片下载&本地图片对比
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15682815.html
Copyright © 2011-2022 走看看