Schlagwort: mixins

Kategorien
Allgemein Vue

MIXINS

  • besitzt das mixin gleiche Attribute oder Methoden, wie auch die Komponente, werden diese zusammengeführt
  • bei gleichen Methodennamen in Mixin und Komponente hat die der Komponente Vorrang und die mixin-Methode verfällt
    Methodenname daher entsprechend anpassen
  • Life-Cycle Hooks (mounted) haben in den Mixins Vorrang, dann erst die Hooks aus der Komponente

LOKALE EINBINDUNG

# /mixin/logger.js  - mounted und methods
export default {
    mounted(){
        this.writeLogEntry(`${this.$options.name}-Component vollständig geladen`);
    },
    methods: {
        writeLogEntry(text){
            console.log(text);
        }
    }
}
#App.vue - verwendet mixin und hat eigene method und mounted
export default {
  name: "App",
  mixins: [logger],
  components: {
    StatusCard,
  },
  mounted(){
    console.log("APP Komponente vollständig geladen");
  },

GLOABALE EINBINDUNG

#main.js
import { createApp } from 'vue'
import App from './App.vue'

import logger from './mixins/logger';

const app = createApp(App);
app.mixin(logger)
app.mount('#app')