Explication détaillée de l'attribut mixins de Vue

Cet article présente principalement l'explication détaillée de l'attribut mixins de Vue. Je vais maintenant le partager avec vous et vous donner une référence.

Tout d'abord, donnez le site officiel https://vuejs.org/v2/guide/mixins.html

Aujourd'hui lors du développement du projet, nous devons changer les attributs d'un label , car il y en a beaucoup. Tous les endroits doivent être modifiés (la logique métier est la même), j'ai donc décidé de voir s'il y avait un moyen de changer un seul endroit et d'ajouter la méthode. Enfin, j'ai trouvé cet attribut lorsque j'ai trouvé le. site officiel.

Ce qui suit est mon fichier -mixin.js

import {mapGetters, mapMutations, mapActions} from 'vuex'  
export const playlistMixin = { 
 computed: { 
  ...mapGetters([ 
   'playList' 
  ]) 
 }, 
 mounted() { 
  this.handlePlaylist(this.playList) 
 }, 
 activated() { 
  this.handlePlaylist(this.playList) 
 }, 
 watch: { 
  playList(newVal) { 
   this.handlePlaylist(newVal) 
  } 
 }, 
 methods: { 
  handlePlaylist() { 
   throw new Error('component must implement handlePlaylist method') 
  } 
 }  
}

Ce fichier expose un objet, mais cet objet et ses composants sont très similaires , c'est-à-dire que la partie code js du composant est similaire.

Ce fichier .js fait est de déclencher la fonction handlePlaylist pendant le cycle de vie et lorsque la variable playList change, mais la logique de cette fonction est implémentée dans les composants qui doivent être modifiés. Voyons comment utiliser Mixin.

import {playlistMixin} from 'common/js/mixin' //引入Mixin 
 export default { 
  mixins: [playlistMixin], 
  methods: { 
    handlePlaylist (playlist) { 
    let bottom = playlist.length > 0 ? '60px' : '' 
    this.$refs.recommend.style.bottom = bottom 
    this.$refs.scroll.refresh() 
   }, 
  } 
 }

est appelé ainsi dans le composant utilisé.

mixins : cet attribut est un tableau, ce qui signifie que plusieurs fichiers mixins peuvent être chargés.

La méthode handlePlaylist consiste à compléter la logique métier. Par conséquent, la méthode this.handlePlaylist() sera ajoutée dans le cycle de vie du composant.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Diffusion et réception des événements Vue2.0 (mode observateur)

Style d'installation vue2.0 /Méthode de chargement CSS

Méthode de réglage dynamique de la hauteur de la table iview

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!