A quoi sert $on dans vue

Dans vue, "$on" est utilisé pour écouter des événements personnalisés sur l'instance actuelle. L'événement peut être déclenché par "vm.$emit". La fonction de rappel recevra tous les paramètres supplémentaires transmis à la fonction de déclenchement d'événement. La syntaxe est "vm .$on(event, callback)".

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

À quoi sert $on dans vue ?

Utilisez $on(eventName) dans vue pour écouter les événements

$on(eventName) pour écouter les événements personnalisés sur l'instance actuelle. Les événements peuvent être déclenchés par vm.$emit. La fonction de rappel reçoit tous les paramètres supplémentaires transmis à la fonction de déclenchement d'événement.

vm.$on( event, callback )

Paramètres :

Événement {string | Array} (Array n'est pris en charge que dans 2.2.0+) Rappel {Function}

Instance 1 Événement unique sur cette page

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

Le code ci-dessus passe par l'événement click du bouton, puis this.$emit délivre l'événement, puis this.$on capture l'événement sur cette page

Exemple 2 Plusieurs événements sur cette 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>

L'exemple ci-dessus concerne deux événements de clic sur cette page. à deux événements en même temps, ou vous pouvez transmettre plusieurs paramètres en même temps

[Recommandation associée : "tutoriel vue.js"]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!