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>
    <h1>left</h1>
    <el-button type="primary" @click="isClick">点击</el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      isClick() {
        this.$emit(&#39;isLeft&#39;, &#39;点击事件！&#39;);
      }
    },
    mounted() {
      this.$on(&#39;isLeft&#39;, (val) => {
        console.log(val);
      });
    }
  }
</script>

以上程式碼，是透過按鈕的點擊事件，然後this.$emit傳遞事件，然後this.$on擷取本頁面的事件

實例2 本頁多個事件

<template>
  <section>
    <h1>left</h1>
    <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(&#39;isLeft&#39;, &#39;点击事件！&#39;);
      },
      isClickOther() {
        this.$emit(&#39;isRight&#39;, [&#39;点击1&#39;, &#39;点击2&#39;]);
      }
    },
    mounted() {
      this.$on(&#39;isLeft&#39;, (val) => {
        console.log(val);
      });
      this.$on(&#39;isRight&#39;, (...val) => {
        console.log(val);
      });
      this.$on([&#39;isLeft&#39;, &#39;isRight&#39;], () => {
        console.log(666);
      });
    }
  }
</script>

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

#【相關推薦：《vue.js教學》 】

以上是vue中$on的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！