Transparente Attribute / $attrs in Vue3: ein leistungsstarkes Tool zur Vereinfachung der Komponentenentwicklung

Vorwort

Vue3 führt eine Reihe neuer Funktionen und Verbesserungen ein. Eine der sehr praktischen neuen Funktionen nach der Verwendung sind transparente Übertragungsattribute (transparente Übertragungsattribute). In diesem Artikel werden die transparenten Übertragungsattribute in Vue3 vorgestellt und Codebeispiele bereitgestellt, um ihre Verwendung in tatsächlichen Projekten zu zeigen.

1. Was sind transparente Übertragungsattribute?

In Vue können übergeordnete Komponenten über Eigenschaften (Props) Daten an untergeordnete Komponenten übergeben, um das Verhalten und Erscheinungsbild untergeordneter Komponenten zu steuern. In einigen Fällen möchten wir jedoch die Eigenschaften der übergeordneten Komponente direkt an HTML-Tags innerhalb der untergeordneten Komponente oder benutzerdefinierten Komponenten übergeben .

In der Vergangenheit mussten wir diese Attribute Schicht für Schicht manuell weitergeben, aber jetzt führt Vue 3 Pass-Through-Attribute ein, um diesen Prozess zu vereinfachen.

Pass-Through-Attribute ermöglichen es der Komponente, nicht deklarierte Requisiten der übergeordneten Komponente automatisch direkt an das Stammelement der untergeordneten Komponente oder ein anderes angegebenes Element weiterzuleiten . Dies bedeutet, dass Sie in der untergeordneten Komponente einfacher auf die Eigenschaften der übergeordneten Komponente zugreifen können, ohne diese manuell Schicht für Schicht übergeben zu müssen.

Erklärung der offiziellen chinesischen Website von Vue3

2. Wie verwende ich transparente Übertragungsattribute?

1. Spezifische Verwendung

• Übergeordnete Komponente: Attribute direkt übergeben

<template>
  <div>
    <ChildComponent name="John Doe" age="25" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

• Unterkomponenten: Verwenden Sie $attrs oder useAttrs(), um Attribute zu empfangen

<template>
  <div>
    <h2>{
   
   { name }}</h2>
    <p>{
   
   { $attrs.age }}</p>
    <!-- 在模板的表达式中直接用 $attrs 访问到 -->
    <p>{
   
   { attrs.age }}</p>
  </div>
</template>

<script setup>
  // 在js里 使用 useAttrs() API 来访问到
  import { useAttrs } from 'vue'

  defineProps({
    name: String
  })

  const attrs = useAttrs()
  console.log(attrs)
</script>

Drucken:

Im obigen Beispiel haben wir eine übergeordnete Komponente, die eine untergeordnete Komponente in die Vorlage einführt <ChildComponent>. Die übergeordnete Komponente übergibt zwei Eigenschaften an die untergeordnete Komponente: nameund age.

In der untergeordneten Komponente haben wir propsdas Objekt zum Deklarieren nameder Eigenschaft verwendet, die Eigenschaft jedoch nicht deklariert age. Zu diesem Zeitpunkt agewird das Attribut als transparentes Attribut betrachtet, und der gedruckte Inhalt und das gerenderte p-Tag enthalten den Wert der nicht deklarierten Requisiten, die von der übergeordneten Komponente übergeben werden age.

Durch die transparente Übergabe von Attributen können wir problemlos auf die Eigenschaften der übergeordneten Komponente in der untergeordneten Komponente zugreifen, ohne sie manuell zu deklarieren und zu übergeben.

2. Vorsichtsmaßnahmen

Wenn eine Komponente mit einem einzelnen Element als Stammelement gerendert wird, wird das transparente Attribut automatisch zum Stammelement hinzugefügt. Komponenten mit mehreren Wurzelknoten verfügen nicht über ein automatisches, attributtransparentes Übertragungsverhalten. Wenn  $attrs es nicht explizit gebunden oder nicht verwendet wird, wird eine Laufzeitwarnung ausgegeben.

Ändern Sie die Unterkomponente oben, um einen Div-Wurzelknoten hinzuzufügen:

<template>
  <div>
    <h2>{
   
   { name }}</h2>
  </div>
  // 多了一个根元素
  <div></div>
</template>

<script setup>
  defineProps({
    name: String
  })
</script>

Zu diesem Zeitpunkt lautet die Fehlermeldung: vueVue weiß nicht, wohin das Attribut transparent übertragen werden soll.

Problemumgehung: Keine Warnung, wenn $attrs explizit gebunden oder verwendet wird oder beides.

<template>
  <!-- 显示绑定 -->
  <div v-bind="$attrs">
    <h2>{
   
   { name }}</h2>
  </div>
  <div>
    <!-- 使用 -->
    <p>{
   
   { $attrs.age }}</p>
  </div>
</template>

<script setup>
  defineProps({
    name: String
  })
</script>

Einige Leute könnten hier verwirrt sein. Da das obere Div angezeigt und gebunden wird, kann das untere Div immer noch Attribute über $attrs verwenden. Welche Funktion hat also die Anzeigebindung? Ist es nicht überflüssig?

eigentlich nicht. Ändern wir die übergeordnete Komponente und fügen ein ID-Attribut hinzu, wobei die untergeordnete Komponente unverändert bleibt:

<template>
  <div>
    <ChildComponent id="custom-layout" name="John Doe" :age="25" />
  </div>
</template>

<script setup>
  import ChildComponent from './ChildComponent.vue'
</script>

Zu diesem Zeitpunkt können Sie sehen, dass das von der übergeordneten Komponente übergebene ID-Attribut automatisch dem durch die V-Bind-Anzeige gebundenen Element hinzugefügt wird.

3. Die praktische Anwendung transparenter Übertragungsattribute

1. Integration externer Bibliotheken

Wenn wir externe Bibliotheken oder Komponenten von Drittanbietern verwenden, müssen wir möglicherweise einige Eigenschaften zur Konfiguration oder Anpassung an diese Komponenten übergeben. Pass-Through-Attribute können die Attribute der übergeordneten Komponente problemlos direkt an externe Bibliotheken oder Komponenten von Drittanbietern übergeben.

<template>
  <div>
    <ThirdPartyComponent v-bind="$attrs" />
  </div>
</template>

<script setup>
import ThirdPartyComponent from 'third-party-library';
</script>

Im obigen Beispiel verwenden wir die Funktion $attrs, um alle nicht deklarierten Requisiten der übergeordneten Komponente abzurufen und sie direkt an eine Drittanbieterkomponente namens ThirdPartyComponent zu übergeben.

2. Komponenten höherer Ordnung

Transparente Attribute können auch bei der Entwicklung von Komponenten höherer Ordnung verwendet werden. Eine Komponente höherer Ordnung ist eine Komponente, die einige zusätzliche Requisiten annimmt und diese Requisiten an ihre internen untergeordneten Komponenten weitergibt.

<template>
  <div>
    <WrappedComponent v-bind="$attrs" />
  </div>
</template>

<script setup>
import WrappedComponent from './WrappedComponent.vue';
</script>

Im obigen Beispiel haben wir eine Komponente höherer Ordnung erstellt und attrsdie Funktion verwendet, um alle nicht deklarierten Requisiten der übergeordneten Komponente abzurufen und sie direkt an die untergeordnete Komponente zu übergeben WrappedComponent.

3. Dynamische Komponenten

Bei der Verwendung dynamischer Komponenten ermöglichen Pass-Through-Attribute die Weitergabe der Eigenschaften der übergeordneten Komponente an die dynamisch gerenderte Komponente.

<template>
  <div>
    <component :is="dynamicComponent" v-bind="$attrs" />
  </div>
</template>

<script setup>
const dynamicComponent = 'ChildComponent';
</script>

Im obigen Beispiel haben wir dynamische Komponenten verwendet, um verschiedene Komponenten basierend auf Bedingungen zu rendern. Durch :isund v-bindkönnen wir alle nicht deklarierten Requisiten der übergeordneten Komponente transparent an die dynamisch gerenderte Komponente übergeben.