Comment utiliser les mixins et extensions de vue

Cette fois, je vais vous expliquer comment utiliser vue mixins et extends, et quelles sont les notes lors de l'utilisation de vue mixins et extends. Voici des cas pratiques, voyons. jetez un oeil ensemble Jetez un oeil.

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.

Mixins et Héritageextensions

Jetez un œil à ce que dit la documentation officielle. En fait, les deux peuvent être compris comme un héritage. Mixins reçoit des objets et des tableaux (peut être compris comme un héritage multiple), et extends reçoit des objets ou des fonctions (peut être compris). en héritage unique).

Hériter la fonction de 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 console

extends created
mixin1 created
mixin2 created
created

• Conclusion : La classe parent héritée des mixins et extends est appelée en premier. La priorité déclenchée par extends est plus élevée, par rapport à la file d'attente

• push(extend, mixin1, minxin2, its. propre fonction de crochet)

• Après les tests, les règles d'héritage de valeur 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 se déclare à nouveau, les variables dans data seront réécrites, quelle que soit la sous-classe.

• 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, l' attribut dans les accessoires, les méthodes dans les méthodes et les règles d'héritage des valeurs calculées sont les mêmes.

Ce qui suit présente les mixins, extends et extend

séparément. mixins

Méthode d'appel : mixins : [mixin1, mixin2]

Il s'agit d'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 fonctions dans les données, les méthodes, les composants et les directives sont basés sur le composant/instance parent

s'étend

Méthode d'appel : extends : CompA

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

étendre

Constructeur de composants d'extension

est automatiquement appelé lorsque nous appelons vue.component('a', {...}) Il convient de noter que les données en extension sont une fonction

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP. !

Lecture recommandée :

La méthode de requête Ajax dans le client axios

vue.js vue-router améliore l'expérience utilisateur

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!