Comment utiliser vue.mixin

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

[Articles connexes recommandés : vue.js]

Utilisation de vue.mixin Méthode :

Vue fournit un mécanisme de mélange - les mixins, qui est utilisé pour réutiliser le contenu des composants plus efficacement. 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.

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 de propriété du composant parent ont été développées.

Référence de composant simple :

父组件 + 子组件 >>> 父组件 + 子组件

Mixins :

父组件 + 子组件 >>> new父组件

Fonction : plusieurs composants peuvent partager des données et méthodes, une fois introduites dans un composant qui utilise un mixin, les méthodes et propriétés du mixin sont également incorporées dans le composant et peuvent être utilisées 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éfinissez un fichier js (mixin.js)

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

2. . Dans le fichier vue Recommandations d'apprentissage gratuites pour l'utilisation de mixin

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

 : JavaScript (vidéo)

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!