Introduction détaillée à l'utilisation des mixins et des extensions en vue

Vue fournit des mixins et étend les éléments de configuration, ce que j'ai trouvé très utile lors d'une utilisation récente. Ensuite, je vais vous présenter l'utilisation intelligente des mixins et des extensions dans Vue à travers cet article. Les amis qui en ont besoin peuvent s'y référer

Vue fournit des mixins et étend des éléments de configuration, ce que j'ai trouvé très utile lors d'une utilisation récente. .

Mélanger les mixins et l'héritage s'étend

Regardez ce que dit la documentation officielle. En fait, les deux peuvent être compris comme de l'héritage, et les mixins reçoivent des tableaux d'objets (peuvent être compris. comme héritage multiple) ), extends reçoit un objet ou une fonction (peut être compris comme un héritage unique).

Hériter la fonction hook

const extend = {
 created () {
  console.log('extends created')
 }
}
const mixin1 = {
 created () {
  console.log('mixin1 created')
 }
}
const mixin2 = {
 created () {
  console.log('mixin2 created')
 }
}
export default {
 extends: extend,
 mixins: [mixin1, mixin2],
 name: 'app',
 created () {
  console.log('created')
 }
}

Sortie de la console

extends created
mixin1 created
mixin2 created
created

• Conclusion : appelez les mixins et étendez d'abord l'héritage. la classe parent de "extends" a une priorité plus élevée que la file d'attente

• push(extend, mixin1, minxin2, sa propre fonction hook)

• Après les tests, les règles d'héritage des valeurs de watch sont les mêmes.

Hériter des méthodes

const extend = {
 data () {
  return {
   name: 'extend name'
  }
 }
}
const mixin1 = {
 data () {
  return {
   name: 'mixin1 name'
  }
 }
}
const mixin2 = {
 data () {
  return {
   name: 'mixin2 name'
  }
 }
}
// name = 'name'
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app',
 data () {
  return {
   name: 'name'
  }
 }
}
// 只写出子类，name = 'mixin2 name'，extends优先级高会被mixins覆盖
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app'
}
// 只写出子类，name = 'mixin1 name'，mixins后面继承会覆盖前面的
export default {
 mixins: [mixin2, mixin1],
 extends: extend,
 name: 'app'
}

• Conclusion : Si la sous-classe est à nouveau déclarée, les variables dans data seront réécrit , sous réserve de la sous-catégorie.

• Si la sous-classe n'est pas déclarée, les variables dans data seront basées sur la dernière classe parent héritée.

• Après les tests, les règles d'héritage pour les attributs dans les accessoires, les méthodes et les valeurs calculées sont les mêmes.

Ce qui suit est une introduction distincte aux mixins, extends, extend

mixins

Appel method: mixins : [mixin1, mixin2]

est une extension du composant parent, comprenant des méthodes, des composants, des directives, etc. . .

Lorsque la fonction hook est déclenchée, la fonction des mixins est appelée en premier, puis la fonction du composant parent est appelée.

Bien que vous puissiez également ajouter des attributs de données et de modèle lors de la création d'un mixin, lorsque le composant parent possède également cet attribut, le parent prévaudra à partir de ce point, vous pouvez également voir l'intention (expansion) du producteur.

Les objets au format clé-valeur tels que les données, les fonctions internes des méthodes, les composants et les directives sont tous basés sur le composant/l'instance parent

extends

Méthode d'appel : extends : CompA

est également une extension du composant parent, similaire aux mixins, mais sa priorité est inférieure à celle du composant parent

extend

Constructeur de composant étendu

Appelé automatiquement lorsque nous appelons vue.component('a', {...})

Ça vaut le coup Notez que les données en extension sont une fonction

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter le tri de table dans Angular

Comment implémenter la validation dans Angular

À propos de la fusion des valeurs d'objet lors de l'utilisation de JavaScript

À propos de l'utilisation de pseudo-tableaux en JavaScript (tutoriel détaillé)

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!