Apakah kegunaan $on dalam vue

Dalam vue, "$on" digunakan untuk mendengar peristiwa tersuai pada kejadian semasa Peristiwa boleh dicetuskan oleh "vm.$emit". Fungsi pencetus peristiwa. Sintaks ialah "vm.$on(event, callback)".

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah kegunaan $on in vue

Gunakan $on(eventName) in vue untuk mendengar acara

$on(eventName) untuk mendengar acara tersuai pada contoh semasa. Peristiwa boleh dicetuskan oleh vm.$emit. Fungsi panggil balik menerima sebarang parameter tambahan yang dihantar ke dalam fungsi pencetus peristiwa.

vm.$on( event, callback )

Parameter:

{rentetan | Array} acara (Array hanya disokong dalam 2.2.0) {Function} callback

Instance 1 Single event pada halaman ini

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

Kod di atas adalah melalui acara klik butang, kemudian ini.$emit melepasi acara, dan kemudian ini.$on menangkap acara halaman ini

Contoh 2 Berbilang acara halaman ini

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

Contoh di atas ialah dua acara klik pada halaman ini Anda boleh mendengar dua acara pada masa yang sama dan anda juga boleh melepasi berbilang parameter pada masa yang sama

.

[Cadangan berkaitan: "tutorial vue. js》]

Atas ialah kandungan terperinci Apakah kegunaan $on dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!