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 事件只會被觸發一次.