Warum den Scope-Slot von Vue verwenden? Wann verwenden?

In diesem Artikel erfahren Sie mehr über den Scope-Slot von vue. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Vue-Slots sind eine großartige Möglichkeit, Inhalte von übergeordneten Komponenten in untergeordnete Komponenten einzufügen. (Lernvideo-Sharing: vue-Video-Tutorial

Das Folgende ist ein einfaches Beispiel. Wenn wir keinen slot-Inhalt des übergeordneten Elements bereitstellen, wird nur der übergeordnete <slot> bereitgestellt Der Inhalt in </slot> wird als Fallback-Inhalt verwendet.

// ChildComponent.vue
<template>
  <div>
     <slot> Fallback Content </slot>
  </div>
</template>

slot位的内容，刚父级<slot>中的内容就会作为后备内容。

// ParentComponent.vue
<template>
   <child-component>
      Override fallback content
   </child-component>
</template>

然后在我们的父组件中:

<div> Override fallback content </div>

编译后，我们的DOM将如下所示。

<template>
   <child-component>
      {{ text }} 
   </child-component>
</template>

<script>
export default {
   data () {
     return {
       text: &#39;hello world&#39;,
     }
   }
}
</script>

我们还可以将来自父级作用域的任何数据包在在 slot 内容中。 因此，如果我们的组件有一个名为name的数据字段，我们可以像这样轻松地添加它。

// ArticleHeader.vue
<template>
  <div>
    <slot v-bind:info="info"> {{ info.title }} </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        title: &#39;title&#39;,
        description: &#39;description&#39;,
      },
    }
  },
}
</script>

【相关推荐：vue.js教程】

为什么我们需要作用域插槽

我们来看另一个例子，假设我们有一个ArticleHeader组件，data 中包含了一些文章信息。

// ParentComponent.vue
<template>
  <div>
    <article-header />
  </div>
</template>

我们细看一下 slot 内容，后备内容渲染了 info.title。

在不更改默认后备内容的情况下，我们可以像这样轻松实现此组件。

// Doesn't work!
<template>
  <div>
    <article-header>
        {{ info.description }}
    </article-header>
  </div>
</template>

在浏览器中，会显示 title。

虽然我们可以通过向槽中添加模板表达式来快速地更改槽中的内容，但如果我们想从子组件中渲染info.description，会发生什么呢?

我们想像用下面的这种方式来做：

// ArticleHeader.vue
<template>
  <div>
    <slot v-bind:info="info"> {{ info.title }} </slot>
  </div>
</template>

但是，这样运行后会报错 ：TypeError: Cannot read property ‘description’ of undefined。

这是因为我们的父组件不知道这个info对象是什么。

那么我们该如何解决呢？

引入作用域插槽

简而言之，作用域内的插槽允许我们父组件中的插槽内容访问仅在子组件中找到的数据。 例如，我们可以使用作用域限定的插槽来授予父组件访问info的权限。

我们需要两个步骤来做到这一点：

• 使用v-bind让slot内容可以使用info
• 在父级作用域中使用v-slot访问slot属性

首先，为了使info对父对象可用，我们可以将info对象绑定为插槽上的一个属性。这些有界属性称为slot props。

// ParentComponent.vue 
<template>
  <div>
    <child-component>
      <template v-slot="article">
      </template>
    </child-component>
  </div>
</template>

然后，在我们的父组件中，我们可以使用<template>和v-slot指令来访问所有的 slot props。

// ParentComponent.vue 
<template>
  <div>
    <child-component>
      <template v-slot="article">
        {{ article.info.description }}
      </template>
    </child-component>
  </div>
</template>

现在，我们所有的slot props,（在我们的示例中，仅是 info）将作为article对象的属性提供，并且我们可以轻松地更改我们的slot以显示descriptionDann in unserer übergeordneten Komponente:

rrreee

Nach der Kompilierung sieht unser DOM so aus.

rrreee

Wir können auch alle Daten aus dem übergeordneten Bereich in slot-Inhalte einschließen. Wenn unsere Komponente also ein Datenfeld namens name hat, können wir es einfach so hinzufügen. rrreee【Verwandte Empfehlungen: vue.js-Tutorial】

Warum brauchen wir Scope-Slots

Lass es uns tun Schauen wir uns ein anderes Beispiel an: Angenommen, wir haben eine ArticleHeader-Komponente und data enthält einige Artikelinformationen.

rrreee

Schauen wir uns den Inhalt des slot genauer an. Der Fallback-Inhalt rendert info.title.

Wir können diese Komponente problemlos auf diese Weise implementieren, ohne den Standard-Fallback-Inhalt zu ändern.

rrreee
Im Browser wird Titel angezeigt.

Während wir den Inhalt eines Slots schnell ändern können, indem wir ihm einen Vorlagenausdruck hinzufügen, was passiert, wenn wir info.description aus einer untergeordneten Komponente rendern möchten?

Wir stellen uns vor, die folgende Methode zu verwenden Tun Sie es: 🎜rrreee🎜 Nach der Ausführung auf diese Weise wird jedoch ein Fehler gemeldet: TypeError: Cannot read property 'description' of undefined. 🎜🎜Das liegt daran, dass unsere übergeordnete Komponente nicht weiß, was dieses info-Objekt ist. 🎜🎜Wie lösen wir das Problem? 🎜🎜Wir stellen vor: Scoped Slots 🎜🎜Kurz gesagt ermöglichen Scoped Slots dem Slot-Inhalt in unserer übergeordneten Komponente den Zugriff auf Daten, die nur in untergeordneten Komponenten zu finden sind. Beispielsweise können wir bereichsbezogene Slots verwenden, um übergeordneten Komponenten Zugriff auf info zu gewähren. 🎜🎜Dazu benötigen wir zwei Schritte: 🎜

• Verwenden Sie v-bind, um Slot-Inhalte mithilfe von info
• Verwenden Sie v-slot im übergeordneten Bereich, um auf das Attribut slot zuzugreifen

🎜Zuerst, um info ist für das übergeordnete Objekt verfügbar, und wir können das info-Objekt als Eigenschaft an den Slot binden. Diese begrenzten Eigenschaften werden Slot-Requisiten genannt. 🎜rrreee🎜Dann können wir in unserer übergeordneten Komponente die Anweisungen <template> und v-slot verwenden, um auf alle Slot-Requisiten zuzugreifen. 🎜rrreee🎜Jetzt sind alle unsere Slot-Requisiten (in unserem Beispiel nur info) als Eigenschaften des article-Objekts verfügbar und wir können unseren slot zeigt den Inhalt der <code>Beschreibung an. 🎜rrreee🎜Der endgültige Effekt ist wie folgt: 🎜🎜🎜🎜🎜🎜🎜 Zusammenfassung 🎜🎜 Obwohl Vue-Slots ein sehr einfaches Konzept sind, ist es sehr nützlich, den Slot-Inhalt für Unterkomponentendaten zugänglich zu machen, um großartige Komponenten zu entwerfen. Indem Daten an einem Ort gespeichert und an andere Orte gebunden werden, wird die Verwaltung verschiedener Zustände klarer. 🎜🎜🎜Originaladresse: https://learnvue.co/2021/03/when-why-to-use-vue-scoped-slots/🎜🎜Autor: Ashish Lahoti🎜🎜🎜Übersetzte Adresse: https://segmentfault. com/a/1190000039801512🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWarum den Scope-Slot von Vue verwenden? Wann verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!