Detaillierte Erklärung des Mixins-Attributs von Vue

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des Mixins-Attributs von Vue vor. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.

Geben Sie zunächst die offizielle Website https://vuejs.org/v2/guide/mixins.html an

Heute müssen wir bei der Entwicklung des Projekts die Attribute eines Labels ändern Da es viele Orte gibt, die geändert werden müssen (die Geschäftslogik ist dieselbe), habe ich beschlossen, zu prüfen, ob es eine Möglichkeit gibt, nur einen Ort zu ändern und die Methode hinzuzufügen. Schließlich habe ich dieses Attribut gefunden, als ich es mir angesehen habe die offizielle Website.

Das Folgende ist meine -mixin.js-Datei

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') 
  } 
 }  
}

Diese Datei macht ein Objekt verfügbar, aber dieses Objekt ist einer Komponente sehr ähnlich. Das heißt, der JS-Codeteil der Komponente ist ähnlich.

Diese .js-Datei löst die Funktion „handlePlaylist“ während des Lebenszyklus aus und wenn sich die Variable „playList“ ändert. Die Logik dieser Funktion ist jedoch in den Komponenten implementiert, die geändert werden müssen. Sehen wir uns an, wie man Mixin verwendet.

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() 
   }, 
  } 
 }

heißt in der verwendeten Komponente so.

Mixins: Dieses Attribut ist ein Array, was bedeutet, dass mehrere Mixin-Dateien geladen werden können.

Die handlePlaylist-Methode dient der Vervollständigung der Geschäftslogik. Daher wird die Methode this.handlePlaylist() zum Lebenszyklus der Komponente hinzugefügt.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Senden und Empfangen von Vue2.0-Ereignissen (Beobachtermodus)

vue2.0-Installationsstil /css-Loader-Methode

Methode zur dynamischen Einstellung der iview-Tabellenhöhe

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Mixins-Attributs von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!