Was ist die Verwendung von $on in vue

In vue wird „$on“ verwendet, um benutzerdefinierte Ereignisse auf der aktuellen Instanz abzuhören. Das Ereignis kann durch „vm.$emit“ ausgelöst werden. Die Callback-Funktion erhält alle zusätzlichen Parameter, die an die Ereignisauslöserfunktion übergeben werden. Die Syntax lautet „vm .$on(event, callback)“.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.

Was ist die Verwendung von $on in Vue?

Verwenden Sie $on(eventName) in Vue, um auf Ereignisse zu warten

$on(eventName), um auf benutzerdefinierte Ereignisse in der aktuellen Instanz zu warten. Ereignisse können durch vm.$emit ausgelöst werden. Die Rückruffunktion empfängt alle zusätzlichen Parameter, die an die ereignisauslösende Funktion übergeben werden.

vm.$on( event, callback )

Parameter:

{string |. Array}-Ereignis (Array wird nur in 2.2.0+ unterstützt) {Function}-Rückruf

Instanz 1 Einzelnes Ereignis auf dieser Seite

<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>

Der obige Code ist durch das Click-Ereignis des Schaltfläche, und dann liefert this.$emit das Ereignis, und dann erfasst this.$on das Ereignis auf dieser Seite

Beispiel 2 Mehrere Ereignisse auf dieser Seite

<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>

Das obige Beispiel sind zwei Klickereignisse auf dieser Seite. Sie können zuhören auf zwei Ereignisse gleichzeitig, oder Sie können mehrere Parameter gleichzeitig übergeben

[Verwandte Empfehlung: „vue.js Tutorial“]

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von $on in vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!