Utiliser des mixins dans Vue

Cette fois, je vais vous présenter l'utilisation du mixin dans Vue. Quelles sont les précautions à prendre pour utiliser le mixin dans Vue ?

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.

Une fois le composant référencé, 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. En substance, les deux sont distincts. et relativement indépendant.

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 d'autres attributs avec le contenu correspondant du composant parent. Cela équivaut à cela après l'introduction, diverses méthodes d'attributs 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 de hook seront appelées, le hook du mixin s'exécutant 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 :

sous-routage d'opération de routage dynamique du routeur Vue

Utilisez Vue pour définir dynamiquement les paramètres de routage

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!