vue中$on怎么用

這篇文章給大家分享的是有關(guān)vue中$on怎么用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

在vue中，“$on”用于監(jiān)聽當(dāng)前實(shí)例上的自定義事件，事件可以由“vm.$emit”觸發(fā)，回調(diào)函數(shù)會(huì)接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)，語(yǔ)法為“vm.$on( event, callback )”。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue中$on的用法

vue中使用 $on(eventName) 監(jiān)聽事件

$on(eventName) 監(jiān)聽當(dāng)前實(shí)例上的自定義事件。事件可以由 vm.$emit 觸發(fā)。回調(diào)函數(shù)會(huì)接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。

vm.$on( event, callback )

參數(shù)：

{string | Array} event (數(shù)組只在 2.2.0+ 中支持) {Function} callback

實(shí)例1  本頁(yè)面單個(gè)事件

<template>
  <section>
    <h2>left</h2>
    <el-button type="primary" @click="isClick">點(diǎn)擊</el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      isClick() {
        this.$emit('isLeft', '點(diǎn)擊事件！');
      }
    },
    mounted() {
      this.$on('isLeft', (val) => {
        console.log(val);
      });
    }
  }
</script>

以上代碼，是通過按鈕的點(diǎn)擊事件，然后this.$emit傳遞事件，然后this.$on捕獲本頁(yè)面的事件

實(shí)例2 本頁(yè)面多個(gè)事件

<template>
  <section>
    <h2>left</h2>
    <el-button type="primary" @click="isClick">點(diǎn)擊</el-button>
    <el-button type="primary" @click="isClickOther">點(diǎn)擊</el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      isClick() {
        this.$emit('isLeft', '點(diǎn)擊事件！');
      },
      isClickOther() {
        this.$emit('isRight', ['點(diǎn)擊1', '點(diǎn)擊2']);
      }
    },
    mounted() {
      this.$on('isLeft', (val) => {
        console.log(val);
      });
      this.$on('isRight', (...val) => {
        console.log(val);
      });
      this.$on(['isLeft', 'isRight'], () => {
        console.log(666);
      });
    }
  }
</script>

以上例子，是本頁(yè)面的兩個(gè)點(diǎn)擊事件，可以同時(shí)監(jiān)聽兩個(gè)事件，也可以同時(shí)傳多個(gè)參數(shù)

感謝各位的閱讀！關(guān)于“vue中$on怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！