Explication détaillée des étapes pour utiliser mixin dans Vue

Cette fois, je vais vous apporter une explication détaillée des étapes d'utilisation du mixin dans Vue. Quelles sont les précautions lors de l'utilisation du mixin dans Vue. Voici des cas pratiques, jetons un coup d'oeil.

Permettez-moi de parler de ma compréhension des mixins dans Vue

Vue fournit un mécanisme de mixage - les mixins, qui est utilisé pour réutiliser plus efficacement le contenu des composants. Au début, je pensais qu'il n'y avait aucune différence entre cela et les composants. . Plus tard, j'ai découvert que c'était faux. Jetons un coup d'œil à la différence entre les mixins et les composants importés dans des circonstances normales.

Après les références du composant dans , cela équivaut à ouvrir un espace séparé dans le composant parent pour effectuer les opérations correspondantes basées sur les valeurs​​des accessoires du composant parent In. par essence, les deux sont encore relativement indépendants.

Et les mixins, après avoir introduit le composant, fusionnent le contenu interne du composant tel que les données et autres méthodes, la méthode et autres attributs avec le contenu correspondant du composant parent. Cela équivaut à cela après l'introduction, diverses méthodes de propriétés du composant parent ont été développées.

Référence du composant simple :

Composant parent + composant enfant>>> Composant parent + composant enfant

Mixins :

Composant parent + composant enfant> ;>> nouveau composant parent

Fonction : plusieurs composants peuvent partager des données et des méthodes. Après avoir été introduits dans un composant à l'aide de mixin, les méthodes et propriétés du mixin peuvent également être incorporées. utilisé directement. Les deux fonctions hook seront appelées et le hook dans le mixin sera exécuté en premier.

Ce qui suit est une introduction à l'utilisation de vue mixin. L'introduction spécifique est la suivante :

1 Définir un fichier js (mixin.js)

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

À propos de l'utilisation, il y a une introduction détaillée dans la documentation vue. Ici, nous présentons uniquement comment utiliser mixin dans un fichier vue.

2. Utilisez mixin dans les fichiers vue

import '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

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 PHP chinois !

Lecture recommandée :

À quoi vous devez faire attention dans le développement front-end de Vue

Comment obtenir le position des éléments DOM dans 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!