Conseils sur l'utilisation de mixin, extend, composant et autres API pour personnaliser les composants dans Vue

Vue.js est un framework frontal populaire qui fournit de nombreuses API pour la personnalisation des composants. Cet article présentera les API telles que mixin, extend et composant dans Vue pour vous aider à maîtriser les compétences de personnalisation des composants.

mixin

mixin est un moyen de réutiliser le code des composants dans Vue. Cela nous permet de réutiliser du code déjà écrit dans différents composants, réduisant ainsi le besoin d'écrire du code en double. Par exemple, nous pouvons utiliser des mixins pour nous aider à ajouter la même fonction de hook de cycle de vie à plusieurs composants.

Exemple :

// 定义一个 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.');
  }
})

Dans l'exemple ci-dessus, myMixin définit une fonction hook créée et l'objet mixin est référencé à la fois dans l'application et dans un autre composant Component. Les informations de la console affichées ici incluront « Mixin créé. », « Application créée » et « Un autre composant créé ».

extend

extend est une API de Vue très utile lors de la définition d'un nouveau composant dans un modèle de composant. Utilisez extend pour définir facilement un composant et utiliser ses modèles, propriétés et méthodes.

Exemple :

// 定义一个基础组件
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');

Dans l'exemple ci-dessus, nous définissons un composant de base baseComponent et l'utilisons pour définir un nouveau composant newComponent. newComponent utilise les modèles, propriétés et méthodes de baseComponent et définit une nouvelle méthode changeMessage, qui est utilisée pour modifier la propriété du message en "Salut, Vue!".

component

component est un moyen de définir des composants dans Vue, nous permettant de charger des composants dans la page à la demande. L'API des composants de Vue offre diverses façons de définir des composants, tels que :

composant 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'
})

Dans l'exemple ci-dessus, nous utilisons l'API Vue.component pour définir globalement un composant nommé mon-composant, qui est utilisé dans son modèle. attribut de message. Lors du référencement du composant dans le modèle, nous utilisons la balise personnalisée b98f2d1b8b5d79f8c1b053de334aa7b5. Enfin, nous créons une instance Vue et la montons sur la page.

Composants locaux

// 局部定义一个组件
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
  }
})

Dans l'exemple ci-dessus, nous avons défini un composant myComponent à l'aide d'un simple objet JavaScript. Lors de la création d'une instance Vue, utilisez l'option composants pour l'enregistrer en tant que composant local. Comme on peut le constater, la différence réside uniquement dans la manière dont les composants sont définis.

Résumé

Cet article présente des API telles que mixin, extend et composant dans Vue pour vous aider à maîtriser les compétences de personnalisation des composants. Le code des composants peut être réutilisé via mixin ; les composants de base peuvent être créés à l'aide d'extension et de nouveaux composants peuvent être définis en fonction d'eux ; le composant est l'API principale pour la définition des composants, offrant une variété de façons flexibles de définir les composants. Je pense que cet article peut vous aider à mieux utiliser Vue.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!