Un article analysant les slots dans Vue

Cet article vous donnera une compréhension approfondie des machines à sous de vue et vous aidera à jouer avec les machines à sous Vue. J'espère qu'il sera utile à tout le monde !

Dans Vue, les slots sont une fonction très puissante. Cela peut rendre les composants packagés beaucoup plus flexibles. Par exemple, si vous utilisez des slots lors de l'encapsulation d'un composant, lorsque le composant parent appelle, le contenu ici peut être. librement défini par le composant parent, sans avoir à réfléchir à la manière de couvrir différents scénarios d'utilisation lors de l'encapsulation du composant. (Partage vidéo d'apprentissage : tutoriel vidéo Vue)

Slot de base

Supposons que nous ayons maintenant un composant qui doit être encapsulé 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

dans slot Le contenu peut être défini arbitrairement dans le composant parent. S'il n'y a pas d'élément <slot></slot> dans le composant, le contenu entre les balises de début et de fin du composant sera perdu lors de l'appel du composant parent. 🎜🎜Puisque slot est dans le composant SlotComponent, les données du composant SlotComponent peuvent-elles être utilisées lors de son appel dans le composant parent ? Évidemment, ce n’est pas possible, car ils relèvent de domaines différents. 🎜

🎜Tout le contenu du modèle parent est compilé dans la portée parent ; tout le contenu du modèle enfant est compilé dans la portée enfant. 🎜

🎜Le contenu par défaut du slot🎜🎜🎜Le slot peut également définir le contenu par défaut, ce qui est un peu comme les paramètres de fonction dans es6 Valeur par défaut, lorsque le composant parent ne fournit pas de contenu lorsqu'il est appelé, cette valeur par défaut sera rendue. Si du contenu est fourni, il remplacera le contenu par défaut. 🎜rrreeerrreee🎜Aucun contenu n'est fourni entre les balises lors de l'appel. La valeur par défaut est rendue et devient un contenu de dissimulation. 🎜🎜<img src="https://img.php.cn/upload/image/887/992/545/1652239130210398.png" title="1652239130210398.png" alt="Un article analysant les slots dans Vue">🎜<h2 data-id="heading-2">🎜Emplacement nommé🎜🎜🎜Si je dois utiliser des emplacements à plusieurs endroits dans le composant, je dois ajouter <code>name au code <code>slot >, pour distinguer où le contenu est rendu. 🎜rrreee🎜Après avoir ajouté l'attribut name à slot, le contenu peut être distribué sous la forme de v-slot:slotName. Si l'attribut name n'est pas donné, le name par défaut sera default, ce qui équivaut à v-slot:default code>, ou il peut. L'abréviation est <code>#default. 🎜🎜🎜Notez que 🎜 v-slot 🎜 ne peut être ajouté que sur 🎜 <template> </template>🎜🎜, mais il existe des cas particuliers, qui seront discutés plus tard. 🎜

🎜Comment accéder au contenu des composants enfants via les slots🎜🎜🎜Grâce à slot, nous pouvons ajouter du contenu aux composants enfants dans les composants parents, mais le rôle des composants parent-enfant Les domaines sont différents Que devons-nous faire si nous voulons utiliser les données du composant enfant dans le composant parent ? 🎜🎜Vous pouvez lier des attributs sur l'élément <slot></slot> du composant enfant, et la valeur est le contenu que vous devez transmettre au composant parent. 🎜rrreee🎜En termes simples, il s'agit de lier une valeur sous la forme de :key='value' sur slot 🎜🎜Lorsqu'il est appelé par le composant parent, passez <. code>v-slot : slotName="slotProps"

pour obtenir cette valeur, le nom slotProps peut être défini par vous-même, 🎜🎜puis passez par slotProps[key] Obtenez cette valeur. 🎜🎜Si le composant n'a qu'un seul modèle par défaut, vous n'avez pas besoin d'écrire v-slot:slotName="slotProps" sur le template. Vous pouvez directement écrire <. sur le nom du composant. code>v-slot🎜rrreee🎜Comme mentionné ci-dessus, si name n'est pas spécifié, il sera considéré comme par défaut. est vrai ici, v -slot:default="slotProps" peut être abrégé en v-slot="slotProps". 🎜

🎜Déstructuration des slotProps🎜🎜

🎜Le fonctionnement interne des slots scoped consiste à inclure le contenu de votre slot dans une fonction qui est passée dans un seul argument🎜🎜Basé sur le principe d'implémentation des slots, nous pouvons également utiliser une syntaxe ES6 pour faire fonctionner les slotProps, telles que 🎜destructuring🎜, 🎜prop renaming🎜 et 🎜assignment Default valeur 🎜etc. 🎜rrreee

🎜Nom de l'emplacement dynamique🎜🎜🎜slot prend en charge <mod v-slot></mod>Ce moyen d'implémenter des slots dynamiques. 🎜🎜Parfois, plusieurs slot sont insérés dans une boucle dans un composant de base. Par exemple, lors de l'appel de 🎜rrreee🎜, vous pouvez utiliser 🎜nom d'emplacement dynamique🎜 + 🎜loop🎜 pour restituer dynamiquement le emplacement🎜

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!