Bagaimana untuk menggunakan mixin untuk komunikasi komponen dalam Vue?

Bagaimana untuk menggunakan mixin untuk komunikasi komponen dalam Vue?

Dalam Vue, komunikasi antara komponen adalah topik yang sangat penting. Ia membolehkan data, kaedah dan logik dikongsi antara komponen yang berbeza untuk mencapai penggunaan semula dan pemisahan komponen dengan lebih baik. Vue menyediakan mekanisme yang dipanggil mixin untuk memudahkan komunikasi antara komponen.

Pertama, kita perlu faham apa itu mixin. Mixin ialah objek boleh guna semula yang mengandungi pilihan yang boleh dicampurkan komponen. Apabila komponen menggunakan campuran, pilihannya akan dicampur ke dalam pilihan komponen. Ini bermakna mixin boleh menyediakan beberapa data tambahan, kaedah dan logik kepada komponen untuk meningkatkan kefungsian komponen.

Untuk menunjukkan penggunaan mixin, kita boleh mencipta dua komponen mudah, satu ialah "Induk" (komponen induk) dan satu lagi ialah "Anak" (komponen anak). Kami akan menggunakan mixin untuk melaksanakan komunikasi antara kedua-dua komponen ini.

Mula-mula, mari kita cipta objek mixins bernama "commonMixin":

const commonMixin = {
  data() {
    return {
      message: "Hello from mixins!"
    };
  },
  methods: {
    showMessage() {
      console.log(this.message);
    }
  }
};

Dalam objek mixins ini, kami mentakrifkan atribut data dan atribut kaedah. Atribut data mengandungi rentetan bernama "message", dan atribut kaedah mengandungi kaedah bernama "showMessage".

Seterusnya, mari kita gunakan mixin dalam komponen induk:

Vue.component("Parent", {
  mixins: [commonMixin],
  template: `
    <div>
      <h1>Parent Component</h1>
      <button @click="showMessage">Show Message</button>
    </div>
  `
});

Dalam komponen induk ini, kita menggunakan pilihan mixins, mencampurkan commonMixin ke dalam pilihan komponen. Kemudian, kami menggunakan butang dalam templat komponen, dan apabila butang itu diklik, kaedah showMessage akan dipanggil.

Akhir sekali, marilah kita juga menggunakan mixin dalam subkomponen:

Vue.component("Child", {
  mixins: [commonMixin],
  template: `
    <div>
      <h1>Child Component</h1>
      <p>{{ message }}</p>
    </div>
  `
});

Dalam subkomponen ini, kita juga menggunakan pilihan mixins dan campurkan commonMixin ke dalam pilihan komponen. Kemudian, kami menggunakan ungkapan interpolasi dalam templat komponen untuk memaparkan mesej yang ditakrifkan dalam komponen induk.

Kini, kita boleh menggunakan dua komponen ini dalam contoh Vue untuk ujian:

new Vue({
  el: "#app"
});

<div id="app">
  <parent></parent>
  <child></child>
</div>

Dalam contoh ujian ini, kita hanya menggunakan komponen "Ibu bapa" dan "Anak" di bawah elemen