Kaedah penulisan bercampur Vue

Vue mix-in ialah cara menggunakan semula kod yang disediakan oleh Vue. Ia membolehkan anda menentukan satu set pilihan dan kemudian berkongsi pilihan tersebut merentas berbilang komponen. Salah satu kegunaan biasa campuran Vue adalah untuk menambah sifat yang dikira, kaedah dan data reaktif yang diperlukan oleh komponen. Dalam artikel ini, kami akan memperkenalkan konsep asas dan penggunaan biasa campuran Vue, dan memberikan contoh dan kod praktikal.

1. Konsep asas

Vue mix-in sebenarnya adalah objek JavaScript, yang boleh mengandungi sebarang pilihan komponen Vue. Biasanya, campuran mentakrifkan beberapa sifat, kaedah dan data yang dikira yang biasa digunakan, dan berbilang komponen boleh berkongsi pilihan ini.

Apabila anda menggunakan objek mixin pada komponen, pilihan dalam objek mixin digabungkan ke dalam pilihan dalam komponen. Jika kedua-dua mixin dan komponen menentukan pilihan yang sama, pilihan komponen mengatasi pilihan mixin.

2. Penggunaan asas

Berikut ialah contoh campuran mudah, yang mentakrifkan sifat yang dikira dan kaedah:

const myMixin = {
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    sayHello() {
      alert("Hello, " + this.fullName + "!")
    }
  }
}

Dalam objek campuran ini, kami mentakrifkan sifat yang dikira fullName yang menggabungkan firstName dan lastName. Kaedah sayHello juga ditakrifkan, yang apabila dipanggil, akan muncul kotak ucapan menggunakan Nama penuh.

Kini, kita boleh menggunakan objek mixin ini pada komponen Vue. Sila lihat contoh berikut:

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  }
  // other component options...
})

Dalam takrif komponen ini, kami mencampurkan myMixin ke dalam komponen, dan kemudian menentukan beberapa pilihan komponen, termasuk firstName dan lastName dua pilihan data. Memandangkan kami mencampurkan dalam sifat pengiraan nama penuh dan kaedah sayHello dalam myMixin, kedua-dua pilihan ini juga akan tersedia dalam komponen.

Sekarang, kita boleh menggunakan pilihan ini dalam komponen ini:

<template>
  <div>
    <h1>{{ fullName }}</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

Komponen ini akan mengira Nama penuh berdasarkan FirstName dan LastName dan memaparkannya pada halaman. Apabila kita mengklik butang "Say Hello", kaedah sayHello akan dipanggil, muncul kotak ucapan yang mengandungi Nama penuh.

3. Pencampuran tempatan

Pencampuran bukan sahaja boleh digunakan pada komponen global, tetapi juga boleh dicampur secara tempatan dalam komponen. Berikut ialah contoh campuran global dan campuran tempatan:

const myGlobalMixin = { // 全局混入
  // ...
}

const myLocalMixin = { // 局部混入
  // ...
}

Vue.component('my-component', {
  mixins: [myGlobalMixin, myLocalMixin],
  // ...
})

Dalam contoh ini, kita mula-mula mentakrifkan campuran global dalam myGlobalMixin dan kemudian mencampurkannya dalam definisi komponen. Pada masa yang sama, kami juga mentakrifkan campuran tempatan myLocalMixin dan mencampurkannya ke dalam komponen bersama-sama dengan campuran global. Campuran tempatan mempunyai keutamaan yang lebih tinggi daripada campuran global, jadi jika pilihan muncul dalam campuran tempatan dan campuran global, pilihan dalam campuran tempatan akan digunakan.

4. Mencampurkan perintah pelaksanaan

Apabila pilihan yang sama wujud dalam campuran dan dalam komponen, nilai campuran akan menimpa nilai asal dalam komponen. Walau bagaimanapun, susunan campuran dan komponen berbeza ditakrifkan mempengaruhi pilihan cantuman akhir. Biasanya, pilihan dalam mixin akan digabungkan dahulu dan kemudian dengan pilihan komponen, tetapi jika mixin dan komponen menentukan pilihan yang sama, pilihan komponen akan digunakan dahulu. Contohnya adalah seperti berikut:

const myMixin = {
  data() {
    return {
      message: 'Mixin Message'
    }
  }
}

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      message: 'Component Message'
    }
  },
  created() {
    console.log(this.message);
  }
})

Dalam contoh ini, kami mentakrifkan campuran myMixin, di mana kami mentakrifkan pilihan data, yang mengandungi atribut mesej. Kemudian kami mencampurkan myMixin ke dalam komponen komponen saya dan menentukan pilihan data yang sama dalam komponen tersebut. Apabila komponen ini dicipta, ia akan mencetak "Mesej Komponen". Kerana atribut mesej yang ditakrifkan dalam komponen mempunyai keutamaan yang lebih tinggi daripada atribut dalam mixin.

Jika anda mahu pilihan mixin dikekalkan dalam objek mixin dan pilihan komponen, gunakan fungsi Vue.extend() untuk mencipta objek mixin. Ini akan mewakili pembina Vue lanjutan baharu yang pilihannya akan dikekalkan merentas semua kejadian komponen. Contohnya adalah seperti berikut:

const myMixin = Vue.extend({
  data() {
    return {
      message: 'Mixin Message'
    }
  }
})

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      message: 'Component Message'
    }
  },
  created() {
    console.log(this.message);
  }
})

Dalam contoh ini, kami menggunakan fungsi Vue.extend() untuk mencipta objek mixin myMixin, yang mengandungi pilihan data di mana atribut mesej ditakrifkan. Kemudian kami mencampurkan myMixin ke dalam komponen komponen saya dan menentukan pilihan data yang sama dalam komponen ini. Apabila komponen ini dicipta, ia akan mencetak "Mixin Message". Kerana sifat yang ditakrifkan dalam pembina Vue lanjutan mempunyai keutamaan yang lebih tinggi daripada sifat yang ditakrifkan dalam komponen.

5. Ringkasan

Vue hybrid ialah cara mudah untuk menggunakan semula kod, menyediakan pilihan perkongsian untuk berbilang komponen untuk meningkatkan kebolehgunaan semula kod. Mixin boleh digunakan secara global dan tempatan Menggunakan mixin dalam Vue ialah salah satu pilihan terbaik untuk melaksanakan fungsi dengan cepat dan meningkatkan kebolehgunaan semula kod. Walau bagaimanapun, anda perlu memberi perhatian kepada keutamaan dan menggabungkan susunan pilihan mixin untuk memastikan kod anda berfungsi seperti yang diharapkan. Dalam pembangunan sebenar, kita boleh mula-mula mentakrifkan objek campuran-dalam mengikut keperluan, dan kemudian mencampurkannya ke dalam komponen yang perlu berkongsi objek campuran masuk, dengan itu mencapai penggunaan semula kod.

Atas ialah kandungan terperinci Kaedah penulisan bercampur Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!