Petua untuk menggunakan mixin untuk mencapai penggunaan semula kod dalam Vue

Vue ialah rangka kerja JavaScript yang sangat popular Ia bukan sahaja membantu pembangun membina aplikasi satu halaman yang kompleks dengan cepat, tetapi juga menyediakan banyak fungsi praktikal untuk membantu kami menulis kod dengan lebih baik. Antaranya, mixin adalah konsep yang sangat penting, yang menyediakan cara yang mudah dan berkesan untuk mencapai penggunaan semula kod.

Dalam artikel ini, kami akan menyelami lebih mendalam tentang campuran Vue dan menunjukkan melalui beberapa contoh cara menggunakannya untuk mencapai teknik penggunaan semula kod.

Apakah itu mixin

Mixins ialah objek dalam Vue yang boleh mengandungi sebarang bilangan pilihan boleh guna semula. Pilihan ini boleh berupa sebarang kaedah kitaran hayat, data atau harta yang dikira, dsb. Apabila kita menggunakan mixin dalam komponen, ia menggabungkan semua pilihan dalam objek mixins ke dalam komponen, menjadikan komponen mempunyai semua fungsi dalam objek mixins.

Contoh

Berikut ialah contoh campuran mudah yang mentakrifkan kaedah log:

const logMixin = {
  methods: {
    log(message) {
      console.log('Logging:', message);
    }
  }
}

Kini, kita boleh menggunakan campuran dalam komponen untuk menggabungkan objek logMixin ke dalam komponen:

Vue.component('my-component', {
  mixins: [logMixin],

  mounted() {
    this.log('Component mounted!');
  }
});

Dalam contoh ini, kita Menggabungkan objek logMixin ke dalam komponen komponen saya dan menggunakan kaedah log di dalamnya.

Apabila kita menjalankan aplikasi dan melihat konsol, kita dapat melihat output berikut:

Logging: Component mounted!

Ini menunjukkan bahawa kaedah log yang dihasilkan oleh campuran sudah tersedia dalam komponen.

Menggunakan penggabungan pilihan

Untuk lebih memahami cara campuran berfungsi, mari kita lihat dengan lebih dekat peraturan penggabungan pilihan dalam Vue. Dalam Vue, pilihan komponen digabungkan menjadi objek pilihan akhir. Objek ini mengandungi semua pilihan daripada komponen induk kepada komponen anak. Apabila berbilang pilihan komponen mempunyai nama yang sama, Vue melakukan penggabungan pilihan, menggabungkannya menjadi pilihan baharu.

Apabila menggunakan pilihan ini untuk menggabungkan dan menerbitkan campuran kepada berbilang komponen, kita perlu memastikan bahawa pilihan yang berbeza dalam campuran tidak bercanggah antara satu sama lain. Kita boleh mengelakkan konflik ini dengan menggunakan ruang nama kita sendiri:

const logMixin = {
  methods: {
    log(message) {
      console.log('Logging:', message);
    }
  }
}

const helloMixin = {
  methods: {
    hello() {
      console.log('Hello!');
    }
  }
}

const helloLogMixin = {
  mixins: [logMixin, helloMixin],

  methods: {
    world() {
      this.log('World');
      console.log('World');
    }
  }
}

Vue.component('my-component', {

  mixins: [helloLogMixin],

  mounted() {
    this.hello();
    this.world();
  }
});

Dalam contoh ini, kita mula-mula mentakrifkan logMixin dan helloMixin dan kemudian menggabungkannya ke dalam objek helloLogMixin. Dalam helloLogMixin, kami juga menambah kaedah dunia, yang akan memanggil kaedah log dalam logMixin dan log mesej ke konsol. Akhirnya, kami menggabungkan helloLogMixin ke dalam komponen komponen saya dan memanggil kaedah hello dan dunia dalam fungsi cangkuk kitaran hayat yang dipasang.

Selepas menjalankan aplikasi, kita dapat melihat output berikut dalam konsol:

Hello!
Logging: World
World

Ini menunjukkan bahawa kedua-dua kaedah helloMix dan logMixin boleh digunakan dalam komponen komponen saya, dan skopnya diasingkan sepenuhnya.

Gunakan campuran global

Dalam Vue, kami juga boleh menggunakan campuran global. Campuran ini boleh digunakan sepanjang aplikasi dan akan diwarisi oleh semua komponen.

Untuk menggunakan campuran global, kita boleh memanggil kaedah Vue.mixin. Kaedah ini memerlukan menghantar objek mixin yang mengandungi pilihan boleh guna semula. Contohnya:

const logMixin = {
  methods: {
    log(message) {
      console.log('Logging:', message);
    }
  }
}

Vue.mixin(logMixin);

Sekarang kami mempunyai logMixin dicampur ke dalam keseluruhan aplikasi.

Apabila kita menjalankan aplikasi, dalam konsol kita dapat melihat output berikut:

Logging: Message from App component

Ini menunjukkan bahawa kita telah berjaya menyuntik mixin ke dalam aplikasi dan kaedah dalam mixin tersedia dalam semua konteks komponen.

Ringkasan

Dalam Vue, mixin ialah fungsi yang sangat praktikal yang boleh membantu kami mencapai penggunaan semula kod dengan mudah. Menggunakan mixin, kita boleh mentakrifkan kod boleh guna semula sebagai objek mixin dan memasukkannya ke dalam komponen. Kami juga boleh menggunakan campuran global untuk menyuntik "kod global" ke dalam keseluruhan aplikasi. Melalui contoh di atas, kita boleh memahami cara campuran Vue berfungsi dan cara menggunakannya pada aplikasi sebenar.

Jika anda ingin mengetahui lebih lanjut tentang Vue, sila layari dokumentasi rasmi.

Atas ialah kandungan terperinci Petua untuk menggunakan mixin untuk mencapai penggunaan semula kod dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!