Verwenden von Slots zum Übergeben von Daten von der übergeordneten Komponente an die untergeordnete Komponente in Vue.js

In diesem Artikel erfahren Sie, wie Sie Vue-Slots verwenden, um Daten von übergeordneten Komponenten an untergeordnete Komponenten in Vue.js zu übergeben. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Dieser Artikel ist für Entwickler aller Stufen (auch Anfänger) geeignet.

Bevor Sie beginnen

Sie benötigen Folgendes auf Ihrem Computer:

• Node.js Version 10.x und höher installiert. Sie können die Version überprüfen, indem Sie den folgenden Befehl im Terminal/in der Eingabeaufforderung ausführen: node -vnode -v

• 代码编辑器； 推荐Visual Studio Code

• Vue的最新版本，已全局安装在您的计算机上

• 您的计算机上已安装Vue CLI 3.0。 为此，请先卸载旧的CLI版本：

npm uninstall -g vue-cli

然后，安装新的：

npm install -g @ vue / cli

• 在此处下载Vue入门项目

• 解压下载的项目

• 导航到解压缩的文件并运行命令以使所有依赖项保持最新：

npm install

什么是Vue插槽？

Vue插槽是Vue团队创建的Vue模板元素，旨在为模板内容分发提供平台。 它是受Web组件规范草案启发的内容分发API的实现。 使用Vue插槽，您可以在项目中的各个组件之间传递或分发HTML代码。

为什么Vue插槽很重要？

内容分布很重要，原因有很多，其中一些与结构有关。使用vue插槽，可以构造一个html接口（类似于typescript），然后可以将其用作通过模板注入构建组件的指南。它是一个非常可伸缩和高效的解决方案，可以将模板代码从一个组件传递到另一个组件。

内容定位是Vue插槽的另一个很好的用例。您只需创建一个模板，然后使用另一个组件或父组件按照您希望模板显示在用户界面中的方式排列该模板。

插槽与道具

如果您了解Vue插槽，您可能会想知道道具和插槽是否做同样的事情。 好了，这些工具或平台的中心思想是鼓励资源的可重用性和效率。 考虑到这一点，插槽和道具是相似的。

props处理在组件之间传递数据对象，而slot处理在组件之间传递模板（html）内容。但是，作用域插槽的行为与道具完全一样；这将在本教程中清楚地说明。

Vue插槽语法

对于插槽，您的子组件充当您希望如何安排内容的接口或结构。可能是这样的：

<template>
  <div>
    <slot></slot>
  </div>
</template>

父组件（要注入子组件的HTML内容所在的地方）可以如下所示：

<Test>
   <h2>Hello World!</h2>
 </Test>

此组合将返回如下所示的用户界面：

<template>
  <div>
    <h2>Hello World!</h2>
  </div>
</template>

请注意，它本身的插槽是如何作为内容注入位置和方式的指南的——这是中心思想。

演示

如果您从一开始就关注这篇文章，那么您将在vs代码中打开vue starter项目。为了演示语法部分中的简单示例，我们的父组件将是app.vue文件。打开app.vue文件并在此代码块中复制：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test>
      <h2>Hello World!</h2>
    </Test>
  </div>
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test
  }
}
</script>

子组件将成为测试组件，因此请在test.vue文件中复制下面的代码块：

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;
}
</script>

使用以下命令在开发环境中运行应用程序：

npm run serve

命名插槽

Vue允许一个组件有多个插槽，这意味着您可以拥有任意数量的插槽。要测试此功能，请将此新代码块复制到test.vue文件中：

<template>
  <div>
    <slot></slot>
    <slot></slot>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;
}
</script>

如果运行应用程序，可以看到hello world被打印了三次。因此，如果您想添加更多的内容（例如，一个标题、一个带有文本的段落，然后是一个无序的列表），vue允许我们命名作用域，以便它可以标识要显示的特定作用域。在test.vue文件中命名插槽如下：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="paragraph"></slot>
    <slot name="links"></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;
}
</script>

现在，还必须根据要在其中显示HTML元素的槽名来标记这些HTML元素。将此复制到app.vue文件的模板部分：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test>
      <h2 slot="header">Hello world!</h2>
      <p slot="paragraph">Hello, I am a paragraph text</p>
      <ul slot="links">
        <li>Hello, I am a list item</li>
        <li>Hello, I am a list item</li>
      </ul>
    </Test>
  </div>
</template>

v-castle语法

当VUE版本2.6发布时，它附带了一个更好的语法来引用名为v-slot

Code Editor empfohlen: Visual Studio Code

🎜🎜Vue Die neueste Version Version von Vue CLI 3.0 wurde global auf Ihrem Computer installiert🎜🎜🎜Vue CLI 3.0 wurde auf Ihrem Computer installiert. Deinstallieren Sie dazu zunächst die alte CLI-Version: 🎜

<Test>
   <h1 slot="header">Hello world!</h1>
</Test>

🎜 Dann installieren Sie die neue: 🎜

<Test v-slot:header>
   <h1>Hello world!</h1>
</Test>

🎜🎜🎜Hier herunterladen Vue-Starterprojekt🎜🎜🎜Entpacken Sie das heruntergeladene Projekt🎜🎜🎜 Navigieren Sie zur entpackten Datei und führen Sie den Befehl aus, um alle Abhängigkeiten zu den Elementen zu erstellen Bleiben Sie auf dem Laufenden: 🎜

<template>
  <div>
    <slot v-bind:team="team"></slot>
    <slot name="paragraph"></slot>
    <slot name="links"></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  data(){
    return{
      team:"FC Barcelona"
    }
  }
}
</script>

🎜🎜🎜Was sind Vue-Slots? 🎜🎜🎜🎜Vue-Slot ist ein Vue-Vorlagenelement, das vom Vue-Team erstellt wurde, um eine Plattform für die Verteilung von Vorlageninhalten bereitzustellen. Es handelt sich um eine Implementierung der Content Distribution API, die vom Entwurf der Web Components-Spezifikation inspiriert ist. Mithilfe von Vue-Slots können Sie HTML-Code zwischen verschiedenen Komponenten in Ihrem Projekt übergeben oder verteilen. 🎜🎜🎜🎜Warum sind Vue-Slots wichtig? 🎜🎜🎜🎜🎜Die Verteilung von Inhalten ist aus vielen Gründen wichtig, einige davon haben mit der Struktur zu tun. Mithilfe von Vue-Slots kann eine HTML-Schnittstelle erstellt werden (ähnlich wie TypeScript), die dann als Leitfaden für die Erstellung von Komponenten per Template-Injection verwendet werden kann. Es handelt sich um eine sehr skalierbare und effiziente Lösung für die Weitergabe von Vorlagencode von einer Komponente an eine andere. 🎜🎜🎜🎜🎜Die Positionierung von Inhalten ist ein weiterer großartiger Anwendungsfall für Vue-Slots. Sie erstellen einfach eine Vorlage und verwenden dann eine andere Komponente oder übergeordnete Komponente, um die Vorlage so anzuordnen, wie sie auf der Benutzeroberfläche angezeigt werden soll. 🎜🎜🎜🎜Spielautomaten vs. Requisiten🎜🎜🎜🎜Wenn Sie sich mit Vue-Spielautomaten auskennen, fragen Sie sich vielleicht, ob Requisiten und Spielautomaten dasselbe bewirken. Nun, die zentrale Idee dieser Tools oder Plattformen besteht darin, die Wiederverwendbarkeit und Effizienz von Ressourcen zu fördern. Vor diesem Hintergrund sind Spielautomaten und Requisiten ähnlich. 🎜🎜props übernimmt die Weitergabe von Datenobjekten zwischen Komponenten, während Slots die Weitergabe von Vorlageninhalten (HTML) zwischen Komponenten übernehmen. Allerdings verhalten sich Slots mit Gültigkeitsbereich genau wie Requisiten; dies wird in diesem Tutorial klar erklärt. 🎜🎜🎜🎜Vue Slot-Syntax 🎜🎜🎜🎜Bei Slots fungiert Ihre Unterkomponente als Schnittstelle oder Struktur dafür, wie Ihre Inhalte angeordnet werden sollen. Es könnte so aussehen: 🎜

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test v-slot="{team}">
      <h2>Hello world! my team is {{team}}</h2>
    </Test>
  </div>
</template>

🎜Die übergeordnete Komponente (wo sich der HTML-Inhalt befindet, der in die untergeordnete Komponente eingefügt werden soll) kann so aussehen:🎜rrreee🎜Diese Kombination gibt eine Benutzeroberfläche zurück, die so aussieht:🎜rrreee🎜Hinweis Dass allein die Art und Weise, wie Slots als Leitfaden dafür dienen, wo und wie Inhalte eingefügt werden können, die zentrale Idee ist. 🎜🎜🎜🎜Demo🎜🎜🎜🎜Wenn Sie diesen Artikel von Anfang an verfolgt haben, öffnen Sie das vue starter-Projekt in vs Code. Um das einfache Beispiel im Syntaxabschnitt zu veranschaulichen, ist unsere übergeordnete Komponente die Datei app.vue. Öffnen Sie die Datei app.vue und kopieren Sie diesen Codeblock: 🎜rrreee🎜Die Unterkomponente wird die Testkomponente sein, also kopieren Sie den folgenden Codeblock in die Datei test.vue :🎜rrreee🎜Verwenden Sie den folgenden Befehl, um die Anwendung in der Entwicklungsumgebung auszuführen:🎜rrreee🎜🎜🎜Benannte Slots🎜🎜🎜🎜Vue ermöglicht einer Komponente mehrere Slots, was bedeutet, dass Sie so viele Slots haben können, wie Sie möchten. Um diese Funktionalität zu testen, kopieren Sie diesen neuen Codeblock in die Datei test.vue: 🎜rrreee🎜Wenn Sie die Anwendung ausführen, können Sie sehen, dass hello world dreimal gedruckt wird . Wenn Sie also weiteren Inhalt hinzufügen möchten (z. B. einen Titel, einen Absatz mit Text und dann eine ungeordnete Liste), ermöglicht uns Vue, den Bereich zu benennen, damit der spezifische anzuzeigende Bereich identifiziert werden kann. Benennen Sie die Slots in der Datei test.vue wie folgt: 🎜rrreee🎜Jetzt müssen Sie diese HTML-Elemente auch entsprechend dem Slotnamen markieren, in dem sie angezeigt werden sollen. Kopieren Sie dies in den Vorlagenabschnitt der Datei app.vue: 🎜rrreee🎜🎜🎜v-castle-Syntax🎜🎜🎜🎜Als VUE-Version 2.6 veröffentlicht wurde, verfügte sie über eine bessere Syntax für die Referenzierung von Namen der Slot-Name in einer Unterkomponente von v-slot, was bedeutet, dass die ursprüngliche Slot-Syntax ersetzt wird. Anstatt also die übergeordnete Komponentenvorlage durch einen Slot wie diesen zu ersetzen: 🎜rrreee🎜 Ab Version 3.0 sieht es jetzt so aus: 🎜

<Test v-slot:header>
   <h1>Hello world!</h1>
</Test>

注意，除了字符串从slot到v-slot的细微变化外，还有一个重大变化：v-slot只能在模板上定义，而不能在任何html元素上定义。这是一个很大的变化，因为它质疑命名插槽的可用性，但截至本文撰写之时，插槽仍然是文档的很大一部分。

作用域插槽

设想一个场景，其中Vue插槽还可以从父组件访问子组件中的数据对象，这是一种具有道具功能的插槽。要说明这一点，请继续，通过将下面的代码块复制到test.vue文件中，在子组件中创建一个数据对象：

<template>
  <div>
    <slot v-bind:team="team"></slot>
    <slot name="paragraph"></slot>
    <slot name="links"></slot>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  data(){
    return{
      team:"FC Barcelona"
    }
  }
}
</script>

与普通props一样，v-bind指令用于将数据中的团队与父组件中的prop引用绑定。打开app.vue文件并将下面的代码块复制到模板部分：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Test v-slot="{team}">
      <h2>Hello world! my team is {{team}}</h2>
    </Test>
  </div>
</template>

如果运行应用程序，您将看到数据对象已成功传递到父组件。

结论

本文向您介绍了vue.js中的插槽，以及它们对内容注入的重要性。您看到了如何设置它，甚至看到了如何为一个组件设置多个插槽。你还看到了狭槽如何通过作用域来充当道具。

英文原文地址：https://blog.logrocket.com/how-to-pass-html-content-through-components-with-vue-slots/

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonVerwenden von Slots zum Übergeben von Daten von der übergeordneten Komponente an die untergeordnete Komponente in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!