Quand vue doit-il utiliser slot ?

Scénarios d'utilisation : les emplacements permettent aux utilisateurs d'étendre les composants pour mieux les réutiliser et les personnaliser ; si le composant parent utilise un composant réutilisé, récupérez le composant. Il y a quelques changements à différents endroits, et il serait imprudent de réécrire les composants. Transmettez le contenu à l'emplacement spécifié à l'intérieur du composant via l'emplacement pour compléter l'application de ce composant réutilisable dans différents scénarios tels que les composants de mise en page, les colonnes de tableau, les sélections déroulantes, le contenu d'affichage de la boîte contextuelle, etc.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Qu'est-ce que slot

---

L'élément slot en HTML, faisant partie de la suite technologique Web Components, est un espace réservé au sein d'un composant Webslot 元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符

该占位符可以在后期使用自己的标记语言填充

举个栗子

<template id="element-details-template">
  <slot name="element-name">Slot template</slot>
</template>
<element-details>
  <span slot="element-name">1</span>
</element-details>
<element-details>
  <span slot="element-name">2</span>
</element-details>

template不会展示到页面中，需要用先获取它的引用，然后添加到DOM中，

customElements.define('element-details',
  class extends HTMLElement {
    constructor() {
      super();
      const template = document
        .getElementById('element-details-template')
        .content;
      const shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild(template.cloneNode(true));
  }
})

在Vue中的概念也是如此

Slot 艺名插槽，花名“占坑”，我们可以理解为solt在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），作为承载分发内容的出口

可以将其类比为插卡式的FC游戏机，游戏机暴露卡槽（插槽）让用户插入不同的游戏磁条（自定义内容）

使用场景

---

通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理

如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情

通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用

比如布局组件、表格列、下拉选、弹框显示内容等

分类

---

slot可以分来以下三种：

• 默认插槽

• 具名插槽

• 作用域插槽

默认插槽

子组件用标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面

父组件在使用的时候，直接在子组件的标签内写入内容即可

子组件Child.vue

<template>
    <slot>
      <p>插槽后备的内容</p>
    </slot>
</template>

父组件

<Child>
  <div>默认插槽</div>  
</Child>

具名插槽

子组件用name属性来表示插槽的名字，不传为默认插槽

父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值

子组件Child.vue

<template>
    <slot>插槽后备的内容</slot>
  <slot name="content">插槽后备的内容</slot>
</template>

父组件

<child>
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽⽤插槽名做参数 -->
    <template v-slot:content>内容...</template>
</child>

作用域插槽

子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上

父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用

子组件Child.vue

<template> 
  <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
    </slot>
</template>

父组件

<child> 
    <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
    <template v-slot:default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
    <template #default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
</child>

小结：

• v-slot属性只能在<template>上使用，但在只有默认插槽时可以在组件标签上使用

• 默认插槽名为default，可以省略default直接写v-slot

• 缩写为#时不能不写参数，写成#default

• 可以通过解构获取v-slot={user}，还可以重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}"

  Le L'espace réservé peut être rempli avec votre propre langage de balisage plus tard

Par exemple

rrreeetemplate ne sera pas affiché sur la page, vous devez d'abord obtenir sa référence, puis l'ajouter au DOM , le concept de rrreee

est aussi le même dans Vue🎜🎜Slot Le nom de scène slot, le nom de la fleur "occupe la fosse", on peut comprendre que le solt a occupe une position dans le modèle de composant, lors de l'utilisation de cette balise de composant, le contenu de la balise de composant remplira automatiquement l'emplacement (en remplaçant la position de l'emplacement dans le modèle de composant), en tant que sortie pour transporter le contenu distribué🎜🎜Il peut être comparé à une console de jeu FC de type carte, une console de jeu L'exposition de la fente pour carte (slot) permet aux utilisateurs d'insérer différentes bandes magnétiques de jeu (contenu personnalisé) 🎜🎜🎜Scénarios d'utilisation 🎜🎜🎜🎜Grâce à la fente, les utilisateurs peuvent étendre les composants pour mieux réutiliser les composants et faire des choses avec eux Traitement personnalisé🎜🎜Si le composant parent utilise un composant réutilisé, il ne sera pas judicieux de réécrire le composant s'il présente une petite quantité de modifications à différents endroits🎜🎜Ajoutez le composant au composant via l'emplacement Transmettez le contenu à l'emplacement interne désigné pour compléter l'application de ce composant réutilisable dans différents scénarios🎜🎜tels que les composants de mise en page, les colonnes de tableau, les sélections déroulantes, le contenu d'affichage de la boîte contextuelle, etc.🎜🎜🎜Classification🎜🎜🎜 🎜L'emplacement peut être divisé selon les trois types suivants :🎜

• 🎜Emplacement par défaut🎜🎜
• 🎜Emplacement nommé🎜🎜
• 🎜Emplacement de portée🎜 🎜🎜🎜🎜Emplacement par défaut🎜🎜🎜Le sous-composant utilise la balise la balise. Lorsque le composant parent est utilisé, il ne va pas dans l'emplacement. Transmettez le contenu et la structure DOM dans la balise sera affichée sur la page🎜🎜Lorsque le composant parent est utilisé, écrivez simplement le contenu. directement dans la balise du composant enfant🎜🎜Child.vue🎜rrreee🎜Composant parent🎜rrreee🎜🎜 Emplacement nommé🎜🎜🎜Le composant enfant utilise le nom attribut pour représenter le nom de l'emplacement et n'est pas transmis comme emplacement par défaut🎜🎜Lorsqu'il est utilisé dans le composant parent Sur la base de l'emplacement par défaut, l'attribut slot est ajouté et la valeur est la valeur de l'emplacement du sous-composant attribut de nom🎜🎜composant enfant Child.vue🎜rrreee🎜composant parent🎜rrreee🎜🎜Emplacement de domaine de fonction🎜🎜🎜Le composant enfant lie les propriétés de la portée à transmettre les informations du composant enfant au composant parent. Ces propriétés seront accrochées à l'objet accepté par le v-slot du composant parent🎜🎜Le composant parent Lors de l'utilisation, obtenez les informations du sous-composant via le v-slot : (abréviation : #) , et utilisez le 🎜🎜composant enfant Child.vue🎜rrreee🎜composant parent🎜rrreee🎜🎜Résumé : 🎜🎜
  • 🎜v-slot ne peut être utilisé que sur <template>, mais peut être utilisé lorsqu'il n'y a qu'un emplacement par défaut. Utilisez 🎜🎜
  • 🎜Le nom de l'emplacement par défaut est default code> sur l'étiquette du composant. Vous pouvez omettre <code>default et écrire directement v-slot🎜🎜
  • 🎜Lorsque l'abréviation est #, vous devez écrire le paramètre comme #default
  🎜🎜
  • 🎜Vous pouvez obtenir v-slot={user} par déconstruction, et vous pouvez également le renommer v-slot="{user : newName}" et définissez la valeur par défaut v-slot="{user = 'default value'}"🎜🎜🎜🎜Recommandations associées : 🎜Tutoriel vidéo vue.js🎜🎜

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!