Ein Artikel, der Slots in Vue analysiert

Dieser Artikel vermittelt Ihnen ein tiefgreifendes Verständnis der Slots in vue und hilft Ihnen beim Spielen mit Vue-Slots. Ich hoffe, dass er für alle hilfreich ist!

In Vue sind Slots eine sehr leistungsstarke Funktion, die die verpackten Komponenten viel flexibler machen kann. Wenn Sie beispielsweise Slots beim Kapseln einer Komponente verwenden, kann der Inhalt hier angezeigt werden Frei definiert durch die übergeordnete Komponente, ohne dass bei der Kapselung der Komponente darüber nachgedacht werden muss, wie verschiedene Nutzungsszenarien abgedeckt werden können. (Teilen von Lernvideos: vue-Video-Tutorial)

Grundlegender Steckplatz

Angenommen, wir haben jetzt eine Komponente, die SlotComponentSlotComponent

<template>
  <div>这是一个slot：<slot> </slot></div>
</template>

<SlotComponent>来自父组件的内容</SlotComponent>

在 slot 中的内容就可以在父组件中任意定义。要是组件中没有<slot></slot>元素，那么在父组件调用时，组件起始和结束标签之间的内容就都会丢失掉。

既然 slot 是在 SlotComponent组件中的，那在父组件中调用的时候能否能使用 SlotComponent 组件里的数据呢 ？ 显然是不能的，因为他们所处的作用域并不相同。

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

插槽的默认内容

插槽也可以设置默认的内容，这有点像 es6 中函数参数的默认值，当父组件调用时并没有提供内容，那么这个默认值就会被渲染出来。提供了内容的话，则会替代默认内容。

<template>
  <div>
    <slot>这是slot的默认内容</slot>
  </div>
</template>

<DefaultSlot></DefaultSlot>

在调用时标签之间并没有提供内容，默认值得以渲染，成为一个兜底内容。

具名插槽

如果在组件中我需要多个地方用到插槽，那就需要给 slot 添加 name，来区分内容渲染到什么地方。

// named slot，名字叫 NamedSlot
<template>
  <div>
    这是具名插槽
    <div>
      <slot name="slot1"></slot>
    </div>
    <div>
      <slot name="slot2"></slot>
    </div>
    <div>
      <slot name="slot3"></slot>
    </div>
  </div>
</template>

// 在父组件中调用
<NamedSlot>
    <template v-slot:slot1>这是插入slot1的内容</template>
    <template v-slot:slot2>这是插入slot2的内容</template>
    <template v-slot:slot3>这是插入slot3的内容</template>
</NamedSlot>

给 slot 加上 name 属性后，可以通过 v-slot:slotName的形式分发内容。不给 name 属性的话，就默认name为 default，等同于 v-slot:default，也可以缩写为#default。

注意， v-slot 只能添加在 <template> </template>上 ，但是也有特殊情况，后面会讲到。

插槽如何访问子组件内容

通过 slot，我们可以在父组件为子组件添加内容，但是父子组件的作用域是不同的，我们想在父组件使用子组件的数据该怎么办呢？

可以在子组件 <slot></slot> 元素上绑定属性，值为你需要传递给父组件的内容。

// 子组件 组件名称为 SlotProp
<div>
    <slot name="slot1" :value1="child1"></slot>
    <slot name="slot2" :value2="child2"></slot>
</div>
//调用
<SlotProp>
  <template v-slot:slot1="slotProps">
    {{ slotProps.value1 }}
  </template>
  <template v-slot:slot2="slotProps">
    {{ slotProps.value2 }}
  </template>
</SlotProp>

简单来说，就是在 slot 上通过 :key='value'的形式绑定一个值，

在父组件调用时，通过v-slot:slotName="slotProps"的形式拿到这个值，slotProps名称可以自己定义，

再通过 slotProps[key] 去拿到这个值。

如果组件只有一个默认模版的话，是可以不用在 template 上写 v-slot:slotName="slotProps"的，可以直接在组件名称上写 v-slot

<SlotProp v-slot:default="slotProps">
    {{ slotProps.value1 }}
</SlotProp>

上面提到过，未指定 name 就会被认为是 default ，这里也是同理，v-slot:default="slotProps"可以简写成 v-slot="slotProps"。

slotProps 的解构

作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里

基于插槽的实现原理，我们也可以使用一些 ES6 的语法来操作 slotProps，比如解构，prop重命名和赋默认值等。

// 解构
<SlotProp v-slot="{ value1 }">
    {{ value1 }}
</SlotProp>

// 重命名,将 value1 重命名为 name1
<SlotProp v-slot="{ value1: name1 }">
    {{ name1 }}
</SlotProp>

// 赋默认值
<SlotProp v-slot="{ value1 = &#39;这是默认值&#39; }">
    {{ value1 }}
</SlotProp>

动态插槽名

slot 支持通过 <template v-slot:></template>这样的方式来实现动态插槽。

有时在一个基础组件中循环了插入了多个 slot ，比如这样

<div v-for="item in slotList" :key="item">
      <slot :name="item"></slot>
</div>

在调用的时候就可以使用动态插槽名 + 循环来动态渲染相应的 slot

<template
  v-for="item in slotList"
  v-slot:[item]
>
    {{item}}
</template>

rrreee

in slot gekapselt werden muss Der Inhalt kann in der übergeordneten Komponente beliebig definiert werden. Wenn in der Komponente kein <slot></slot>-Element vorhanden ist, geht der Inhalt zwischen den Start- und End-Tags der Komponente verloren, wenn die übergeordnete Komponente aufgerufen wird. 🎜🎜Da sich slot in der Komponente SlotComponent befindet, können die Daten in der Komponente SlotComponent verwendet werden, wenn sie in der übergeordneten Komponente aufgerufen wird? Offensichtlich nicht möglich, da sie in unterschiedlichen Bereichen liegen. 🎜

🎜Alle Inhalte in der übergeordneten Vorlage werden im übergeordneten Bereich kompiliert; alle Inhalte in der untergeordneten Vorlage werden im untergeordneten Bereich kompiliert. 🎜

🎜Der Standardinhalt des Slots🎜🎜🎜Der Slot kann auch den Standardinhalt festlegen, der den Funktionsparametern in es6 Standardwert: Wenn die übergeordnete Komponente beim Aufruf keinen Inhalt bereitstellt, wird dieser Standardwert gerendert. Wenn Inhalte bereitgestellt werden, ersetzen diese den Standardinhalt. 🎜rrreeerrreee🎜Beim Aufruf wird kein Inhalt zwischen den Tags bereitgestellt. Der Standardwert wird gerendert und wird zu einem Vertuschungsinhalt. 🎜🎜<img src="https://img.php.cn/upload/image/887/992/545/1652239130210398.png" title="1652239130210398.png" alt="Ein Artikel, der Slots in Vue analysiert">🎜<h2 data-id="heading-2">🎜Benannter Slot🎜🎜🎜Wenn ich Slots an mehreren Stellen in der Komponente verwenden muss, muss ich <code>name zum <code>slot-Code hinzufügen >, um zu unterscheiden, wo der Inhalt gerendert wird. 🎜rrreee🎜Nach dem Hinzufügen des Attributs name zu slot kann der Inhalt in der Form v-slot:slotName verteilt werden. Wenn das Attribut name nicht angegeben ist, lautet der Standard-name default, was äquivalent zu v-slot:default ist. code>, oder es kann Die Abkürzung ist <code>#default. 🎜🎜🎜Beachten Sie, dass 🎜 v-slot 🎜 nur auf 🎜 <template> </template>🎜🎜 hinzugefügt werden kann, es jedoch Sonderfälle gibt, die später besprochen werden. 🎜

🎜So greifen Sie über Slots auf den Inhalt von Unterkomponenten zu🎜🎜🎜Über slot können wir Inhalte für Unterkomponenten in übergeordneten Komponenten hinzufügen, aber die Rolle der Eltern-Kind-Komponenten Die Domänen sind unterschiedlich. Was sollten wir tun, wenn wir die Daten der Kinderkomponente in der Elternkomponente verwenden möchten? 🎜🎜Sie können Attribute an das Element <slot></slot> der untergeordneten Komponente binden, und der Wert ist der Inhalt, den Sie an die übergeordnete Komponente übergeben müssen. 🎜rrreee🎜Einfach ausgedrückt geht es darum, einen Wert in der Form :key='value' an slot zu binden. 🎜🎜Beim Aufruf durch die übergeordnete Komponente übergeben Sie v-slot: slotsName="slotProps"

um diesen Wert zu erhalten, kann der Name slotProps selbst definiert werden, 🎜🎜dann gehen Sie durch slotProps[key] Holen Sie sich diesen Wert. 🎜🎜Wenn die Komponente nur eine Standardvorlage hat, müssen Sie v-slot:slotName="slotProps" nicht in die template schreiben. Sie können v-slot🎜rrreee🎜Wenn name nicht angegeben ist, wird es als default betrachtet ist hier wahr, v -slot:default="slotProps" kann als v-slot="slotProps" abgekürzt werden. 🎜

🎜Destrukturierung von SlotProps🎜🎜

🎜Das Innenleben von Slots mit Gültigkeitsbereich besteht darin, den Inhalt Ihres Slots in eine Funktion einzuschließen, die in einem einzigen Argument übergeben wird🎜🎜Basierend auf dem Implementierungsprinzip von Slots können wir auch eine ES6-Syntax verwenden, um slotProps zu betreiben, wie z. B. 🎜destructuring🎜, 🎜prop renaming🎜 und 🎜assignment Default Wert 🎜usw. 🎜rrreee

🎜Dynamischer Slot-Name🎜🎜🎜slot unterstützt <template v-slot:></template>Dies Möglichkeit, dynamische Slots zu implementieren. 🎜🎜Manchmal werden mehrere slot in einer Schleife in einer Basiskomponente eingefügt. Wenn Sie beispielsweise 🎜rrreee🎜 aufrufen, können Sie 🎜dynamischer Slotname🎜 + 🎜loop🎜 verwenden, um den entsprechenden Steckplatz🎜

<template
  v-for="item in slotList"
  v-slot:[item]
>
    {{item}}
</template>

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

Das obige ist der detaillierte Inhalt vonEin Artikel, der Slots in Vue analysiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!