vue中$on怎么用

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

在vue中，“$on”用于監聽當前實例上的自定義事件，事件可以由“vm.$emit”觸發，回調函數會接收所有傳入事件觸發函數的額外參數，語法為“vm.$on( event, callback )”。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

vue中$on的用法

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

$on(eventName) 監聽當前實例上的自定義事件。事件可以由 vm.$emit 觸發。回調函數會接收所有傳入事件觸發函數的額外參數。

vm.$on( event, callback )

參數：

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

實例1  本頁面單個事件

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

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

實例2 本頁面多個事件

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

以上例子，是本頁面的兩個點擊事件，可以同時監聽兩個事件，也可以同時傳多個參數

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