Mixin in Vue

Einige Daten und Methoden können von mehreren Komponenten gemeinsam genutzt werden. Anstatt sie in jede Komponente zu schreiben, können die gemeinsam genutzten Methoden in das Mixin eingefügt werden.

Mixin-Definition

Erstellen Sie einen neuen Mixin-Ordner im src-Verzeichnis und eine neue index.js

export const mixins = {
 data(){
  return{
    msg:''
  }
 },
 created() {},
 mounted() {},
 computed: {},
 methods: {
  getxxx(){
    return x
  }
 }
}

globale Mixins

In main.js:

import { mixins } from './mixin/index'
Vue.mixin(mixins)

Teilweise Einmischung

Fügen Sie Komponenten hinzu, die gemischt werden müssen

import { mixins } from './mixin/index'
export default ({
  mixins:[mixins]
})

verwenden

Die in Mixins-Daten definierten Variablen und Methoden können direkt von this.msg und this.getxxx() verwendet werden

Vorsichtsmaßnahmen

1. Daten müssen zurückgegeben werden

export const myNotification = {
 data() {
  return{}//必须，不然加载不到
 },
 created() { },
 mounted() { },
 computed: {},
 methods: {}
}