Tutorial zur Verwendung von $attrs und $listeners in Vue

einführen

$attrs

Erbt alle Eigenschaften der übergeordneten Komponente (Eigenschaften, die nicht über Eigenschaften empfangen werden, umfassen Klassennamen und Stil).

inheritAttrs:

Ob Nicht-Props-Attribute in der äußersten Ebene des Tags angezeigt werden. Der Standardwert ist „true“, was bedeutet, dass alle Attribute der übergeordneten Komponente (außer propsspezifischen Bindungen) als normale HTML-Funktionen übernommen und auf das Stammelement der untergeordneten Komponente angewendet werden. Wenn Sie nicht möchten, dass das Stammelement der Komponente Funktionen übernimmt, legen Sie inheritAttrs: false fest, aber die Klasse wird trotzdem übernommen.

$Listener

Es handelt sich um ein Objekt, das alle Methodenbindungen empfangen kann und alle Listener enthält, die auf diese Komponente einwirken. Mit v-on="$listeners" werden alle Ereignislistener auf ein bestimmtes Kindelement dieser Komponente umgeleitet.

Beispiel

In der übergeordneten Komponente

<Vorlage>
  <div id="app">
    <Son src="https://img01.yzcdn.cn/vant/logo.png"></Son>
  </div>
</Vorlage>
 
<Skript>
importiere Son aus "./components/son.vue";
Standard exportieren {
  Name: "App",
  Komponenten:
    Sohn,
  },
};
</Skript>
 
<Stil></Stil>

In Unterkomponente

<Vorlage>
  <div id="app">
    <Son src="https://img01.yzcdn.cn/vant/logo.png"></Son>
  </div>
</Vorlage>
 
<Skript>
importiere Son aus "./components/son.vue";
Standard exportieren {
  Name: "App",
  Komponenten:
    Sohn,
  },
};
</Skript>
 
<Stil></Stil>

Es ist ersichtlich, dass, wenn inheritAttrs standardmäßig auf false gesetzt ist, die Attribute an die äußerste Unterkomponente übergeben werden

Wenn inheritAttrs wahr ist

Wenn Sie Requisiten zum Empfangen von Attributen verwenden, werden die Attribute nicht angezeigt

Zusammenfassung: Wenn die im Komponenten-Tag übergebenen Attribute nicht von der Unterkomponente empfangen werden, werden sie an die äußerste Ebene des Unterkomponenten-Tags ausgeführt.

Nicht-Props-Attribute können über $attrs {Attributname: Attributwert} empfangen werden.

<Vorlage>
  <div>
    <img v-bind="$attrs" alt="" />
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  inheritAttrs: false,
};
</Skript>
<Stilbereich>
.img {
  Breite: 100px;
  Höhe: 100px;
}
</Stil>

Wenn Sie ein Klickereignis an eine untergeordnete Komponente binden, wird das Klickereignis nicht ausgelöst. Sie können den Modifikator .native verwenden, um die Bindung erfolgreich durchzuführen.

Oder verwenden Sie $listeners, um alle Methoden zu binden.

In Unterkomponente

Ergebnis

Zusammenfassen

Alle Nicht-Props-Attribute können über $attrs empfangen werden.

Verwenden Sie: v-bind="$attrs", um alle Nicht-Props-Attribute an die entsprechenden Tags zu binden. Dies kann auch für Komponenten verwendet werden.

Alle Methodenbindungs-Unterkomponenten der Komponente können über $listeners empfangen werden.

Verwenden Sie: v-on="$listeners", um alle Methoden an die entsprechenden Tags der Komponente zu binden, was auch für Komponenten verwendet werden kann

Dies ist das Ende dieses Tutorials zur Verwendung von $attrs und $listeners in Vue. Weitere Informationen zu Vue $attrs $listeners finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!