Was ist der Unterschied zwischen Mixin und Komponente in Vue?

Der Unterschied zwischen einem Mixin und einer Komponente: Nachdem auf die Komponente verwiesen wurde, entspricht dies dem Öffnen eines separaten Bereichs in der übergeordneten Komponente, um entsprechende Vorgänge basierend auf den Werten der Requisiten der übergeordneten Komponente auszuführen Die beiden sind immer noch unterschiedlich und relativ unabhängig. Nach der Einführung der Komponente entsprechen Mixins verschiedenen erweiterten Attributmethoden der übergeordneten Komponente und dem internen Inhalt der Komponente, z. B. Daten und anderen Methoden Andere Attribute werden mit dem entsprechenden Inhalt der übergeordneten Komponente zusammengeführt.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Was ist Mixin?

Mixins sind eine sehr flexible Möglichkeit, wiederverwendbare Funktionalität in Vue-Komponenten zu verteilen.

Gemischte Objekte können beliebige Komponentenoptionen enthalten.

Wenn eine Komponente ein Mixin-Objekt verwendet, werden alle Optionen des Mixin-Objekts in die Optionen der Komponente selbst gemischt. [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung]

Der Unterschied zwischen Mixin und Komponenten

Nachdem auf die Komponente verwiesen wurde, entspricht dies dem Öffnen eines separaten Bereichs im übergeordneten Element Komponente, um sie entsprechend der übergeordneten Komponente zu verwenden. Die durch Requisiten übergebenen Werte werden entsprechend verarbeitet. Im Wesentlichen sind die beiden immer noch unterschiedlich und relativ unabhängig.

Und Mixins führen nach der Einführung der Komponente den internen Inhalt der Komponente wie Daten und andere Methoden, Methoden und andere Attribute mit dem entsprechenden Inhalt der übergeordneten Komponente zusammen. Dies entspricht der Erweiterung verschiedener Eigenschaftsmethoden der übergeordneten Komponente nach der Einführung.

Einfache Komponentenreferenz:

• Übergeordnete Komponente + untergeordnete Komponente>>> Übergeordnete Komponente + untergeordnete Komponente

Mixins:

• Übergeordnete Komponente + untergeordnete Komponente>>> neue übergeordnete Komponente

Es ist ein bisschen so, als würde man eine öffentliche Methode von Vue registrieren, die an mehrere Komponenten oder mehrere Vue-Objektinstanzen gebunden werden kann. Ein weiterer Punkt ähnelt der Registrierung von Methoden in Prototypobjekten, d. h. Komponenten oder Vue-Instanzobjekten. Sie können immer noch Methoden mit demselben Funktionsnamen definieren, um sie zu überschreiben, ähnlich wie bei einer Unterklasse und einer übergeordneten Klasse.

Der Unterschied zwischen Mixins und Vuex

Mixins: Sie können gemeinsam genutzte Variablen definieren und in jeder Komponente verwenden. Nach der Einführung in die Komponente ist jede Variable unabhängig voneinander und die Änderung des Werts erfolgt sich im Bauteil nicht gegenseitig beeinflussen. Wenn das Objekt identisch ist, überschreibt die Komponente mixins

vuex: Wird zur Statusverwaltung verwendet. Die darin definierten Variablen können in jeder Komponente verwendet und geändert werden, diese Variable in anderen Komponenten Der Wert wird ebenfalls entsprechend geändert.

Mixins

1. Erstellen Sie zuerst eine JS -Datei, wie z. 3. Gleicher Name Die Hook-Funktionen werden in einem Array zusammengefasst, sodass beide aufgerufen werden. Darüber hinaus werden die Hooks des Mixin-Objekts vor den eigenen Hooks der Komponente aufgerufen.

export const elTableAdsorbent = {
  data() {
    return {
      count:10
    }
  },
  methods: {
    // 显示页面中所有内容
    handleCount() {
      this.count++
  }
}

4. Wenn die Schlüsselnamen zweier Objekte in Konflikt geraten, wird das Schlüssel-Wert-Paar des Komponentenobjekts verwendet.

// 定义一个混入对象
    var myMixin = {
        data(){
            return{
                parent: 405
            }
        },
        mounted: function () {
            this.hello()
        },
        methods: {
            hello: function () {
                console.log(this.parent, 'hello from mixin!')
            }
        }
    }

Anwendung von Mixins

<el-button type="primary" @click="handleCount">{{count}}</el-button>
 
import { elTableAdsorbent } from '@/utils/mixin/elTableAdsorbent'
 
export default {
  mixins: [elTableAdsorbent],
  data() {
    return {}
  },
  created(){},
  methods:{}, 
  watch:{}
}

(Teilen von Lernvideos: vuejs Einführungs-Tutorial, Grundlegendes Programmiervideo
)

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Mixin und Komponente in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!