Eine detaillierte Einführung in das Attribut $attrs in Vue

In diesem Artikel wird hauptsächlich die Verwendung der neuen Attribute $attrs und $listeners in Vue v2.4 vorgestellt. Freunde, die es brauchen, folgen Sie mir bitte, um gemeinsam zu lernen.

Vorwort

Wenn bei der Verschachtelung mehrstufiger Komponenten Daten übergeben werden müssen, wird üblicherweise Vuex verwendet. Wenn Sie Daten nur ohne Zwischenverarbeitung übertragen, wäre die Verwendung von vuex zur Verarbeitung etwas übertrieben. Vue Version 2.4 bietet mit v-bind="$attrs" eine weitere Methode, um Attribute in der übergeordneten Komponente, die nicht als Props-Attributbindung gelten, an die untergeordnete Komponente zu übergeben, die normalerweise mit der Option interitAttrs verwendet wird. Der Grund, warum diese beiden Attribute erwähnt werden, besteht darin, dass ihre Entstehung die komponentenübergreifende Kommunikation zwischen Komponenten prägnant und geschäftsklar macht, ohne auf Vuex und Event Bus angewiesen zu sein.

Analysieren Sie zunächst die folgenden Anwendungsszenarien:

Kommunikation zwischen Komponente A und Komponente B: (Eltern-Kind-Komponente)

Wie im Bild oben gezeigt, sind die drei Komponenten A, B und C nacheinander verschachtelt. Gemäß den Entwicklungsgewohnheiten von Vue kann die Kommunikation der Eltern-Kind-Komponenten auf folgende Weise erreicht werden:

• A nach B wird über Requisiten an Unterkomponenten weitergegeben, B nach A wird durch $emit in der B-Komponente und v-on in der A-Komponente erreicht

• Durch Einstellung Der globale Vuex-Freigabestatus wird durch berechnete Eigenschaften und Commit-Mutationen erreicht, um den Zweck der Kommunikation zwischen übergeordneten und untergeordneten Komponenten zu erreichen.

• Vue Event Bus nutzt Instanzen von Vue, um Ereignisse zu überwachen und zu veröffentlichen und die Übertragung zwischen Komponenten zu erreichen.

Wenn die Daten nicht global sein müssen, sondern nur die Kommunikation zwischen übergeordneten und untergeordneten Komponenten erforderlich ist, reicht häufig die erste Methode aus.

Kommunikation zwischen Komponente A und Komponente C: (Komponentenverschachtelungsbeziehung über mehrere Ebenen hinweg)

Wie oben gezeigt, gehören Komponente A und Komponente C zur Komponentenverschachtelung über mehrere Ebenen hinweg. Wenn die Kommunikation zwischen den beiden erreicht werden musste, wurde dies oft auf folgende Weise erreicht:

• Mit Hilfe der Übertragung der B-Komponente werden die Requisiten der Reihe nach von oben weitergegeben nach unten und von unten nach oben, $emit Die Übertragung von Ereignissen erzielt den Effekt einer ebenenübergreifenden Komponentenkommunikation

• Mithilfe der globalen Statusfreigabe von Vuex

• Vue Event Bus implementiert mithilfe von Vue-Instanzen die Überwachung und Veröffentlichung von Ereignissen sowie die Übertragung zwischen Komponenten.

Offensichtlich führt die erste Methode über props und $emit dazu, dass die Geschäftslogik zwischen Komponenten aufgebläht wird und Komponente B nur als Übertragungsstation fungiert. Wenn Sie die zweite Vuex-Methode verwenden, scheint sie in manchen Fällen etwas übertrieben zu sein (es geht nur darum, eine Datenübertragung zwischen Komponenten zu realisieren, nicht um das Konzept der Datenfreigabe). Die Verwendung der dritten Situation findet sich im tatsächlichen Projektbetrieb, wenn eine gute Ereignisüberwachung und ein gutes Release-Management nicht erreicht werden können. Dies führt häufig leicht zu Chaos im Datenfluss und ist für die Projektwartung nicht förderlich.

Das Erscheinen von $attrs und $listeners löst das Problem im ersten Fall. Wenn Komponente B Requisiten und Ereignisse übergibt, ist es nicht erforderlich, redundanten Code zu schreiben. Sie ersetzt einfach $attrs und $listeners es nach oben oder unten.

Der Beispielcode

lautet wie folgt:

A-Komponente (App.vue)

<template>
 <p id="app">
 <child1
 :p-child1="child1"
 :p-child2="child2"
 v-on:test1="onTest1" //此处监听了两个事件，可以在B组件或者C组件中直接触发
 v-on:test2="onTest2"> 
 </child1>
 </p>
</template>
<script>
 import Child1 from &#39;./Child1.vue&#39;;
 export default {
 data () {
 return {};
 },
 components: { Child1 },
 methods: {
 onTest1 () {
 console.log(&#39;test1 running...&#39;);
 },
 onTest2 () {
 console.log(&#39;test2 running&#39;);
 }
 }
 };
</script>

B-Komponente (Child1.vue)

<template>
 <p class="child-1">
 <p>in child1:</p>
 <p>props: {{pChild1}}</p>
 <p>$attrs: {{$attrs}}</p>
 <hr>
 <!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
 <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
 <child2 v-bind="$attrs" v-on="$listeners"></child2>
 </p>
</template>
<script>
 import Child2 from &#39;./Child2.vue&#39;;
 export default {
 props: [&#39;pChild1&#39;],
 data () {
 return {};
 },
 inheritAttrs: false,
 components: { Child2 },
 mounted () {
 this.$emit(&#39;test1&#39;);
 }
 };
</script>

Ergebnis:

in child1:

props: v_child1

$attrs: { „p-child2“: „v_child2“}

C Komponente (Child2.vue)

<template>
 <p class="child-2">
 <p>in child2:</p>
 <p>props: {{pChild2}}</p>
 <p>$attrs: {{$attrs}}</p>
 <hr>
 </p>
</template>
<script>
 export default {
 props: [&#39;pChild2&#39;],
 data () {
 return {};
 },
 inheritAttrs: false,
 mounted () {
 this.$emit(&#39;test2&#39;);
 }
 };
</script>

Ergebnisse:

in child2:

props: v_child2

$attrs: {}

Wissenspunktzusammenfassung

$attrs

enthält Attributbindungen (außer Klasse und Stil), die im übergeordneten Bereich nicht als Requisiten betrachtet werden (und auch nicht als solche erwartet werden). Wenn eine Komponente keine Requisiten deklariert, werden alle übergeordneten Bereichsbindungen (außer Klasse und Stil) hier einbezogen, und interne Komponenten können über v-bind="$attrs" übergeben werden – beim Erstellen von Komponenten auf höherer Ebene Sehr nützlich.

$listeners

Enthält V-on-Ereignis-Listener (ohne .native-Modifikator) im übergeordneten Bereich. Es kann über v-on="$listeners" an interne Komponenten übergeben werden – sehr nützlich beim Erstellen von Komponenten auf höherer Ebene.

inheritAttrs

Standardmäßig werden Attributbindungen des übergeordneten Bereichs, die nicht als Requisiten erkannt werden, „zurückgegriffen“ und als normale HTML-Attribute behandelt, die auf das Stammelement von angewendet werden die untergeordnete Komponente. Beim Schreiben einer Komponente, die ein Zielelement oder eine andere Komponente umschließt, entspricht dies möglicherweise nicht immer dem erwarteten Verhalten. Durch Festlegen von inheritAttrs auf „false“ werden diese Standardverhalten entfernt. Diese Funktionen können über das Instanzattribut $attrs (ebenfalls neu in 2.4) aktiviert und über v-bind explizit an Nicht-Root-Elemente gebunden werden.

Die Verwendung der oben genannten Funktionen kann die Komplexität von komponentenübergreifenden Requisiten und der Bereitstellung von Ereignissen vollständig reduzieren, ohne Vuex und den Ereignisbus zu verwenden.

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

Verwandte Artikel:

So verwenden Sie JQuery, um den Hintergrundstil durch Klicken auf einen Link zu ändern

Über den Ajax-Synchronisierungsvorgang wird der Browser angehalten (detailliertes Tutorial)

So überwachen Sie die Anzahl der in ein Textfeld eingegebenen Wörter in js (ausführliches Tutorial)

Was sind die effizienten Algorithmen in JavaScript

react-router4 Kooperieren Sie mit Webpack require.ensure, um asynchrones Laden zu implementieren (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in das Attribut $attrs in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!