Petua menggunakan mixin, extend, komponen dan API lain untuk menyesuaikan komponen dalam Vue

Vue.js ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak API untuk penyesuaian komponen. Artikel ini akan memperkenalkan API seperti mixin, extend dan komponen dalam Vue untuk membantu anda menguasai kemahiran penyesuaian komponen.

mixin

mixin ialah cara untuk menggunakan semula kod komponen dalam Vue. Ia membolehkan kami menggunakan semula kod yang sudah ditulis ke dalam komponen yang berbeza, dengan itu mengurangkan keperluan untuk menulis kod pendua. Sebagai contoh, kami boleh menggunakan mixin untuk membantu kami menambah fungsi cangkuk kitaran hayat yang sama pada berbilang komponen.

Contoh:

// 定义一个 mixin 对象
var myMixin = {
  created: function () {
    console.log('Mixin created.');
  }
}

// 在多个组件中引入 mixin 对象
var app = new Vue({
  mixins: [myMixin],
  created: function () {
    console.log('App created.');
  }
})

var anotherComponent = new Vue({
  mixins: [myMixin],
  created: function () {
    console.log('Another component created.');
  }
})

Dalam contoh di atas, myMixin mentakrifkan fungsi cangkuk yang dicipta dan objek mixin dirujuk dalam kedua-dua apl dan komponen Komponen lain. Output maklumat konsol di sini akan termasuk "Mixin dibuat.", "Apl dibuat dan "Komponen lain dibuat.".

extend

extend ialah API Vue yang sangat berguna apabila mentakrifkan komponen baharu dalam templat komponen. Gunakan extend untuk mentakrifkan komponen dengan mudah dan menggunakan templat, sifat dan kaedahnya.

Contoh:

// 定义一个基础组件
var baseComponent = Vue.extend({
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, world!'
    }
  }
})

// 使用基础组件定义新组件
var newComponent = Vue.extend({
  mixins: [baseComponent],
  methods: {
    changeMessage: function () {
      this.message = 'Hi, Vue!';
    }
  }
})

// 创建新组件的实例并挂载到 DOM
var app = new newComponent().$mount('#app');

Dalam contoh di atas, kami mentakrifkan komponen asas BaseComponent dan menggunakannya untuk menentukan komponen baru newComponent. newComponent menggunakan templat, sifat dan kaedah baseComponent, dan mentakrifkan kaedah baharu changeMessage, yang digunakan untuk mengubah suai sifat mesej kepada "Hai, Vue!".

komponen

komponen ialah cara mentakrifkan komponen dalam Vue, membolehkan kami memuatkan komponen ke dalam halaman atas permintaan. API komponen Vue menyediakan pelbagai cara untuk mentakrifkan komponen, seperti:

komponen global

// 全局定义一个组件
Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, world!'
    }
  }
})

// 在模板中引用组件
<div id="app">
  <my-component></my-component>
</div>

// 创建 Vue 实例
var app = new Vue({
  el: '#app'
})

Dalam contoh di atas, kami menggunakan API Vue.component untuk mentakrifkan secara global komponen bernama my-component, yang digunakan dalam templatnya atribut mesej. Apabila merujuk komponen dalam templat, kami menggunakan teg tersuai b98f2d1b8b5d79f8c1b053de334aa7b5. Akhir sekali, kami mencipta contoh Vue dan melekapkannya ke halaman.

Komponen Tempatan

// 局部定义一个组件
var myComponent = {
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, world!'
    }
  }
}

// 在模板中引用组件
<div id="app">
  <my-component></my-component>
</div>

// 创建 Vue 实例
var app = new Vue({
  el: '#app',
  components: {
    'my-component': myComponent
  }
})

Dalam contoh di atas, kami mentakrifkan komponen myComponent menggunakan objek JavaScript yang mudah. Apabila membuat contoh Vue, gunakan pilihan komponen untuk mendaftarkannya sebagai komponen tempatan. Seperti yang dapat dilihat, perbezaannya hanya dalam cara komponen ditakrifkan.

Ringkasan

Artikel ini memperkenalkan API seperti mixin, extend dan komponen dalam Vue untuk membantu anda menguasai kemahiran penyesuaian komponen. Kod komponen boleh digunakan semula melalui mixin; komponen asas boleh dibuat menggunakan extend dan komponen baharu boleh ditakrifkan berdasarkan komponen tersebut adalah API teras untuk definisi komponen, menyediakan pelbagai cara yang fleksibel untuk menentukan komponen. Saya percaya artikel ini boleh membantu anda menggunakan Vue.js dengan lebih baik.

Atas ialah kandungan terperinci Petua menggunakan mixin, extend, komponen dan API lain untuk menyesuaikan komponen dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!