Vue での $on の使用法は何ですか

vue では、"$on" は現在のインスタンスのカスタム イベントをリッスンするために使用されます。イベントは "vm.$emit" によってトリガーできます。コールバック関数は、イベントトリガー関数。構文は「vm.$on(event, callback)」です。

#この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue での $on の使用法とは何ですか

vue で $on(eventName) を使用してイベントをリッスンします

$on(eventName) でカスタム イベントをリッスンします現在のインスタンス。イベントは vm.$emit によってトリガーできます。コールバック関数は、イベント トリガー関数に渡される追加パラメーターを受け取ります。

vm.$on( event, callback )

パラメータ:

{文字列 | 配列} イベント (配列は 2.2.0 でのみサポートされます) {関数} コールバック

インスタンス 1 このページの単一イベント

<template>
  <section>
    <h1 id="left">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 this の複数のイベントpage

<template>
  <section>
    <h1 id="left">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>

上記の例は、このページの 2 つのクリック イベントです。同時に 2 つのイベントをリッスンすることができ、同時に複数のパラメーターを渡すこともできます

##[関連する推奨事項] : "

vue.js チュートリアル

" ]

以上がVue での $on の使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。