Heim >Web-Frontend >View.js >Was ist die Verwendung von $on in vue

Was ist die Verwendung von $on in vue

WBOY
WBOYOriginal
2022-03-17 11:20:5617138Durchsuche

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)“.

Was ist die Verwendung von $on in vue

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:So verwenden Sie v-if in VueNächster Artikel:So verwenden Sie v-if in Vue