Explication détaillée des étapes d'utilisation des Mixins dans Vue.js

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation des Mixins dans Vue.js Quelles sont les précautions pour utiliser les Mixins dans Vue.js. Voici des cas pratiques, voyons. jetez un oeil.

Un scénario très courant : il existe deux composants très similaires. Ils ont des fonctions de base très similaires, mais il y a suffisamment de différences entre eux. Comment les combiner ? Ou créer un composant de base puis définir suffisamment d'accessoires pour distinguer facilement les scénarios d'utilisation ?

Aucune des deux approches n'est parfaite : si vous les séparez en deux composants complètement différents, vous pouvez augmenter le risque de devoir modifier les deux composants en même temps lorsque les exigences changent (changements fonctionnels). Cela viole le principe "DRY". D'un autre côté, trop d'accessoires peuvent rapidement devenir encombrés et obliger les responsables, ou même vous-même, à le faire. Devoir comprendre le contexte de ces accessoires avant de pouvoir les utiliser peut être très décevant.

Les Mixins de Vue sont un moyen de programmation très pratique, car en fin de compte, la programmation pratique consiste à rendre le code plus facile à comprendre en réduisant continuellement les pièces mobiles. (Michael Feathers a une super citation sur ce point). afin que vous puissiez l'utiliser dans différents composants tout au long de votre application. Si le mixin est créé correctement, Ils sont purs – ils ne modifient pas ou ne changent pas le contenu en dehors de la portée de la fonction , vous pouvez donc les exécuter à plusieurs endroits et tant que les valeurs d'entrée sont les mêmes, Vous obtenez toujours les mêmes résultats de manière très fiable. C'est vraiment puissant.

Rencontrez les Mixins

Les mixins sont un moyen très flexible de distribuer des fonctionnalités réutilisables dans les composants Vue. Un mixinobject peut contenir des options de composants arbitraires. Lorsque vous utilisez un objet mixin comme composant, toutes les options de l'objet mixin seront mélangées aux options du composant lui-même.

Châtaigne

Disons que nous avons quelques composants différents dont le travail consiste à basculer les états booléens, un modal et une info-bulle. Ces info-bulles n'ont pas grand-chose en commun avec les modaux, à l'exception de cette fonctionnalité : elles ont un aspect différent, elles s'utilisent différemment, mais leur logique est similaire.

//modal
const Modal = {
 template: '#modal',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}
 
//tooltip
const Tooltip = {
 template: '#tooltip',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}

On peut en extraire la logique et créer des pièces réutilisables :

const toggle = {
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}
 
const Modal = {
 template: '#modal',
 mixins: [toggle]
};
 
const Tooltip = {
 template: '#tooltip',
 mixins: [toggle]
};

duang — Un petit et simple :chestnut : faites-nous savoir que les Mixins sont si intéressants, pratiques et pratiques pour encapsuler certaines fonctions réutilisables.

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 :

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!