Komunikasi komponen Vue: menggunakan $on untuk mendengar acara tersuai

Komunikasi komponen Vue: Gunakan $on untuk mendengar acara tersuai

Dalam Vue, komponen adalah bebas dan setiap komponen mempunyai kitaran hayat dan datanya sendiri. Walau bagaimanapun, dalam proses pembangunan sebenar, komunikasi antara komponen tidak dapat dielakkan. Vue menyediakan cara komunikasi komponen yang sangat fleksibel dan cekap: mendengar acara tersuai.

Mekanisme mendengar acara tersuai Vue dilaksanakan berdasarkan model terbitkan-langganan. Anda boleh mendengar acara tersuai dalam satu komponen dengan menggunakan kaedah $on bagi contoh Vue dan mencetuskan acara dalam komponen lain melalui kaedah $emit. Di bawah ini kami akan memperkenalkan secara terperinci cara menggunakan $on untuk pemantauan acara tersuai.

Mula-mula, mari buat contoh komponen ibu bapa-anak yang mudah Komponen induk ialah App.vue dan komponen anak ialah Child.vue.

App.vue:

<template>
  <div>
    <h2>App Component</h2>
    <button @click="notifyChild">通知子组件</button>
    <Child></Child>
  </div>
</template>

<script>
  import Child from './Child.vue';

  export default {
    name: 'App',
    components: {
      Child
    },
    methods: {
      notifyChild() {
        this.$emit('customEvent', 'Hello Child Component!');
      }
    }
  }
</script>

Child.vue:

<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      this.$parent.$on('customEvent', this.handleCustomEvent);
    },
    beforeDestroy() {
      this.$parent.$off('customEvent', this.handleCustomEvent);
    },
    methods: {
      handleCustomEvent(message) {
        this.message = message;
      }
    }
  }
</script>

Dalam komponen induk App.vue, kami mencetuskan acara tersuai customEvent dengan mengklik butang dan menghantar mesej kepada komponen anak. customEvent，并传递一个消息给子组件。

子组件Child.vue中，我们在mounted生命周期钩子函数中使用this.$parent.$on方法监听父组件中的自定义事件customEvent。并在beforeDestroy生命周期钩子函数中使用this.$parent.$off方法取消监听。在方法handleCustomEvent中，我们将父组件传递的消息赋值给子组件的message。

通过以上代码示例，我们实现了父子组件之间的通信。当点击父组件中的按钮时，子组件会接收到父组件传递的消息并将其显示出来。

除了父子组件之间的通信，我们还可以在任意两个组件之间建立通信。只需在其中一个组件中使用this.$on监听自定义事件，然后在另一个组件中使用this.$emit

Dalam komponen kanak-kanak Child.vue, kami menggunakan kaedah this.$parent.$on dalam fungsi cangkuk kitaran hayat yang dipasang untuk mendengar acara tersuai customEvent dalam komponen induk. Dan gunakan kaedah this.$parent.$off dalam fungsi sebelumDestroy life cycle hook untuk membatalkan pendengaran. Dalam kaedah handleCustomEvent, kami menetapkan mesej yang dihantar oleh komponen induk kepada mesej komponen anak.

Melalui contoh kod di atas, kami telah mencapai komunikasi antara komponen ibu bapa dan anak. Apabila butang dalam komponen induk diklik, komponen anak akan menerima mesej yang diluluskan oleh komponen induk dan memaparkannya. 🎜🎜Selain komunikasi antara komponen ibu bapa dan anak, kami juga boleh mewujudkan komunikasi antara mana-mana dua komponen. Hanya gunakan this.$on dalam satu komponen untuk mendengar acara tersuai, dan kemudian gunakan this.$emit untuk mencetuskan acara dalam komponen lain. 🎜🎜Ringkasnya, melalui kaedah $on Vue untuk pemantauan acara tersuai, kami boleh mencapai komunikasi komponen yang fleksibel dan cekap. Sama ada komunikasi antara komponen ibu bapa dan anak atau komunikasi antara mana-mana dua komponen, ia boleh dikendalikan dengan mudah. Saya harap artikel ini akan membantu anda dengan isu komunikasi komponen dalam pembangunan Vue. 🎜

Atas ialah kandungan terperinci Komunikasi komponen Vue: menggunakan $on untuk mendengar acara tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!