Was ist ein Slot? Lassen Sie uns über die Verwendung von Slots in Vue3 sprechen

Vue Ich glaube, dass jeder, der Vue verwendet hat, es mehr oder weniger verwendet hat, aber kennen Sie alle seine Verwendungsmöglichkeiten? In diesem Artikel erfahren Sie alles über die Verwendung von Slots in Vue3, um Ihnen dabei zu helfen, Lücken zu finden und zu schließen. (Lernvideo-Sharing: Vue-Video-Tutorial

Was ist ein Slot?

Einfach ausgedrückt ist es ein pit in einer untergeordneten Komponente, die der übergeordneten Komponente zur Verfügung gestellt wird <slot></slot> bedeutet, dass die übergeordnete Komponente einen beliebigen Vorlagencode in diese Lücke füllen kann und dann die untergeordnete Komponente <slot></slot> wird durch diese Inhalte ersetzt. Das einfachste Slot-Beispiel

//父组件
<template>
  <div>
    <child>Hello Juejin</child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child
<template>
    <div>
        <p>1</p>
        <slot></slot>
        <p>2</p>
    </div>
</template>

坑位，用<slot></slot> 表示，父组件可以在这个坑位中填充任何模板代码然后子组件中<slot></slot>就会被替换成这些内容。比如一个最简单插槽例子

//父组件
<template>
  <div>
    <child>{{ msg }}</child>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
const msg = ref(&#39;Hello Juejin&#39;)
</script>

子组件中的<slot></slot> 便是父组件放在子组件标签<child></child>之间的内容。当然这之间你可以传入任何代码片段，都会被放到<slot></slot>这个位置。

同样的你也可以在标签<child></child>之间放入变量，比如

//子组件
<template>
    <div>
        <slot>我是默认内容</slot>
    </div>
</template>

//父组件1
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//父组件2
<template>
  <div>
    <child>Hello Juejin</child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

先解释一下后面频繁出现的两个词 插槽和插槽内容，防止后面阅读搞混了：

同样的 插槽表示的就是这个msg变量。所以子组件 插槽是可以访问到父组件的数据作用域，而插槽内容是无法访问子组件的数据（即父组件中两个<child></child>之间是不能使用子组件中的数据的），这就是所谓的渲染作用域。后面会介绍插槽向插槽内容传参的方式

默认内容

在父组件没有提供任何插槽内容的时候，我们是可以为子组件的插槽指定默认内容的，比如

//子组件

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot></slot>
        </div>
        <!-- 小萝卜 -->
        <div>
            <slot></slot>
        </div>
        <!-- 中萝卜 -->
        <div>
            <slot></slot>
        </div>
    </div>
</template>

//父组件

<template>
  <div>
    <child>
      <!-- #smallTurnip 为v-slot:smallTurnip缩写 -->
      <template>
        小萝卜
      </template>
      <template>
        中萝卜
      </template>
      <template>
        大萝卜
      </template>
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

此时父组件1展示默认内容

父组件2展示提供的内容

具名插槽

很多时候一个 插槽满足不了我们的需求，我们需要多个 插槽。于是就有了具名插槽，就是具有名字的 插槽。简单来说这个具名插槽的目的就是让一个萝卜一个坑，让它们呆在该呆的位置去。比如带 name 的插槽 <slot name="xx"></slot>被称为具名插槽。没有提供 name 的 <slot></slot> 会隐式地命名为“default”。在父组件中可以使用v-slot:xxx（可简写为#xxx） 指令的 <template></template> 元素将目标插槽的名字传下去匹配对应 插槽。比如

//父组件
<template>
  <div>
    <child>
      <!-- 等同于#smallTurnip -->
      <template>
        小萝卜
      </template>
      <template>
        中萝卜
      </template>
      <template>
        大萝卜
      </template>
    </child>
  </div>
</template>
<script>
import { ref } from &#39;vue&#39;
import Child from &#39;./Child.vue&#39;
const slotName = ref(&#39;smallTurnip&#39;)
</script>

所以父组件中无需在意顺序，只需要写好模板命好名，它就会自动去到它所对应的位置。

动态插槽名

动态插槽名就是插槽名变成了变量的形式，我们可以随时修改这个变量从而展示不同的效果。它的写法是v-slot:[变量名]或者缩写为#[变量名]。

//子组件
<template>
    <div>
        <slot></slot>
    </div>
</template>

//父组件

<template>
  <div>
    <child>
      My name is {{ slotProps.personName }} and I am {{ slotProps.age }} years old this year
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

作用域插槽

作用域插槽

上面说过插槽内容是无法访问子组件的数据的，但是如果我们想在插槽内容访问子组件的状态该怎么办呢？

其实插槽可以像对组件传递 props 那样，在slot标签绑定属性从而传递给父组件中的插槽内容。首先来看下默认插槽的传值方式

<template>
  <div>
    <child>
      My name is {{ personName }} and I am {{ age }} years old this year
    </child>
  </div>
</template>

你还可以以结构的形式获取slot<slot></slot> in einer untergeordneten Komponente besteht beispielsweise darin, dass die übergeordnete Komponente zwischen den untergeordneten Komponenten-Tags <child></child> platziert wird Inhalt. Natürlich können Sie in diesem Zeitraum jedes Codefragment übergeben, das dann an der Stelle <slot></slot> platziert wird.

Ähnlich Sie können auch Variablen zwischen den Tags <child></child> einfügen, wie zum Beispiel 🎜

//父组件
<template>
  <div>
    <child>
      <template>
        {{ bigTurnipProps.message }}
      </template>
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child.vue

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot></slot>
        </div>
    </div>
</template>

🎜 Lassen Sie mich zunächst die beiden häufig vorkommenden Wörter slot und Slot content erklären. Code> um Verwirrung beim späteren Lesen zu vermeiden: 🎜🎜<img src="https://img.php.cn/upload/image/501/828/212/166125564295003Was%20ist%20ein%20Slot?%20Lassen%20Sie%20uns%20%C3%BCber%20die%20Verwendung%20von%20Slots%20in%20Vue3%20sprechen" title="1661255642950034 .png" alt=" Was ist ein Slot? Lassen Sie uns über die Verwendung von Slots in Vue3 sprechen">🎜🎜Derselbe <code>slot repräsentiert diese msg-Variable. Daher kann die untergeordnete Komponente Slot auf den Datenbereich der übergeordneten Komponente zugreifen, der Slot-Inhalt jedoch nicht auf die Daten der untergeordneten Komponente (d. h. die beiden <child></child> kann keine Daten in Unterkomponenten verwenden), dies ist der sogenannte Rendering-Bereich. Die Methode zum Übergeben von Parametern von slot an slot content wird später vorgestellt🎜

🎜Der Standardinhalt🎜🎜🎜 ist dies nicht in der übergeordneten Komponente verfügbar. Bei der Bereitstellung eines beliebigen Slot-Inhalts können wir den Standardinhalt für den Slot der untergeordneten Komponente angeben, z. B. 🎜rrreee🎜Zu diesem Zeitpunkt Übergeordnete Komponente 1 Code>Standardinhalt anzeigen🎜🎜🎜🎜Übergeordnete Komponente 2 zeigt den bereitgestellten Inhalt an🎜🎜🎜

🎜Benannter Slot🎜🎜🎜Oft ein Slot kann uns nicht befriedigen Für unsere Bedürfnisse benötigen wir mehrere <code>Slots. Es gibt also einen benannten Slot, bei dem es sich um einen slot mit einem Namen handelt. Um es einfach auszudrücken: Der Zweck dieses benannten Schlitzes besteht darin, die Karotten einzufangen und sie dort bleiben zu lassen, wo sie sollen. Beispielsweise wird der Slot <slot name="xx"></slot> mit name als benannter Slot bezeichnet. Ein <slot></slot>, der keinen namen bereitstellt, wird implizit „default“ genannt. In der übergeordneten Komponente können Sie das Element <template></template> der Direktive v-slot:xxx (kann als #xxx abgekürzt werden) verwenden Legen Sie den Ziel-Slot fest. Der Name wird so weitergegeben, dass er mit dem entsprechenden Slot übereinstimmt. Zum Beispiel🎜rrreee🎜 🎜 🎜Sie müssen sich also keine Gedanken über die Reihenfolge in der übergeordneten Komponente machen. Sie müssen nur die Vorlage schreiben und benennen, und sie wird automatisch an den entsprechenden Speicherort verschoben. 🎜

🎜Dynamischer Slot-Name🎜🎜🎜Dynamischer Slot-Name ist der Slot-Name in Form einer Variablen. Wir können diese Variable jederzeit ändern, um verschiedene Effekte anzuzeigen. Es wird als v-slot:[Variablenname] geschrieben oder als #[Variablenname] abgekürzt. 🎜rrreee

🎜Scope-Slots🎜🎜

🎜Scope-Slots🎜

🎜Oben gesagtSlot-Inhalt kann nicht auf die Daten von Unterkomponenten zugreifen, aber was ist, wenn wir auf den Status von Unterkomponenten im Slot-Inhalt zugreifen möchten? 🎜🎜Tatsächlich kann slot an das Tag slot übergeben werden, so wie die Übergabe von Requisiten an eine Komponente. Eigenschaften können an das Tag slot gebunden werden an den Slot-Inhalt in der übergeordneten Komponente übergeben. Werfen wir zunächst einen Blick auf die Wertübertragungsmethode des Standard-Slots🎜rrreee🎜Sie können die von slot bereitgestellten Daten auch in Form einer Struktur erhalten🎜rrreee🎜🎜🎜

注意不能绑定name属性，因为你绑定了name它就成了具名插槽了。同样具名插槽中的name属性也不会传递给插槽内容。因为传递的参数只能在插槽内容中使用，所以这类能够接受参数的插槽就被称为了作用域插槽。

具名作用域插槽

下面再看下具名作用域插槽它的传参方式。它接收参数的方式是通过template标签的指令v-slot的值获取的，所以可以缩写成这样

//父组件
<template>
  <div>
    <child>
      <template>
        {{ bigTurnipProps.message }}
      </template>
    </child>
  </div>
</template>
<script>
import Child from &#39;./Child.vue&#39;
</script>

//子组件Child.vue

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot></slot>
        </div>
    </div>
</template>

这类插槽便是具名作用域插槽啦

写在最后

到这里插槽(slot)的全部用法基本就已经介绍完啦。如果感觉对你有用的话赶紧点赞收藏吧！

（学习视频分享：web前端开发、编程基础视频）

Das obige ist der detaillierte Inhalt vonWas ist ein Slot? Lassen Sie uns über die Verwendung von Slots in Vue3 sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!