Wann sollte Vue Slot verwenden?

Verwendungsszenarien: Slots ermöglichen es Benutzern, Komponenten zu erweitern, um Komponenten besser wiederzuverwenden und sie anzupassen. Wenn die übergeordnete Komponente eine wiederverwendete Komponente verwendet, erhalten Sie die Komponente. Es gibt einige Änderungen an verschiedenen Stellen, und es wäre unklug, Komponenten neu zu schreiben. Leiten Sie Inhalte über den Steckplatz an die angegebene Stelle innerhalb der Komponente weiter, um die Anwendung dieser wiederverwendbaren Komponente in verschiedenen Szenarien wie Layoutkomponenten, Tabellenspalten, Dropdown-Auswahl, Popup-Box-Anzeigeinhalten usw. abzuschließen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Was ist Slot

---

Das slot-Element in HTML ist als Teil der Web Components-Technologiesuite ein Platzhalter innerhalb einer Webkomponenteslot 元素 ，作为 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 = '默认值'}"

  Das Der Platzhalter kann später mit Ihrer eigenen Auszeichnungssprache ausgefüllt werden

Zum Beispiel

rrreeetemplate wird nicht auf der Seite angezeigt. Sie müssen zuerst die Referenz abrufen und sie dann zum DOM , das Konzept von rrreee

ist auch in Vue das gleiche🎜🎜Slot Der Künstlername-Slot, der Blumenname „besetzt die Grube“, wir können verstehen, dass der Solt vorhanden ist Besetzt eine Position in der Komponentenvorlage. Wenn dieses Komponenten-Tag verwendet wird, füllt der Inhalt im Komponenten-Tag automatisch den Steckplatz aus (und ersetzt die Steckplatzposition in der Komponentenvorlage) und dient als Ausgang für die Übertragung verteilter Inhalte🎜🎜Das kann sein Im Vergleich zu einer FC-Spielekonsole vom Kartentyp ermöglicht eine Spielekonsole durch Freilegen des Kartensteckplatzes (Steckplatz) Benutzern das Einsetzen verschiedener Spielmagnetstreifen (benutzerdefinierter Inhalte). Es ist besser, Komponenten wiederzuverwenden und Dinge mit ihnen zu tun. Benutzerdefinierte Verarbeitung. 🎜🎜 Wenn die übergeordnete Komponente eine wiederverwendete Komponente verwendet, ist es unklug, die Komponente neu zu schreiben, wenn an verschiedenen Stellen nur geringfügige Änderungen vorgenommen wurden. 🎜🎜 Fügen Sie die Komponente über die Komponente hinzu Steckplatz Übergeben Sie den Inhalt an der intern festgelegten Stelle, um die Anwendung dieser wiederverwendbaren Komponente in verschiedenen Szenarien abzuschließen🎜🎜z. B. Layoutkomponenten, Tabellenspalten, Dropdown-Auswahl, Inhalt der Popup-Box-Anzeige usw.🎜🎜🎜Klassifizierung🎜🎜 🎜🎜Slot kann in die folgenden drei Typen unterteilt werden:🎜

• 🎜Standard-Slot🎜🎜
• 🎜Benannter Slot🎜🎜
• 🎜Scope-Slot 🎜🎜🎜🎜🎜Standardslot🎜🎜🎜Die Unterkomponente verwendet das -Tag, um die DOM-Struktur zu bestimmen Wenn die übergeordnete Komponente verwendet wird, wird der Inhalt nicht in den Slot übernommen, und die DOM-Struktur im Tag wird auf der Seite angezeigt. Wenn die übergeordnete Komponente verwendet wird, schreiben Sie einfach die Inhalt direkt im Tag der untergeordneten Komponente🎜🎜Child.vue🎜rrreee🎜Übergeordnete Komponente🎜rrreee🎜🎜 Das Namensattribut stellt den Namen des Steckplatzes dar und wird nicht als Standardsteckplatz übergeben🎜🎜Bei Verwendung in der übergeordneten Komponente Auf der Grundlage des Standardsteckplatzes wird das Steckplatzattribut hinzugefügt, und der Wert ist der Wert der Unterkomponente Slot-Namensattribut🎜🎜untergeordnete Komponente Child.vue🎜rrreee🎜übergeordnete Komponente🎜rrreee🎜🎜Funktionsdomänen-Slot🎜🎜🎜Die untergeordnete Komponente bindet Eigenschaften im Bereich Um die Informationen der untergeordneten Komponente an die übergeordnete Komponente zu übergeben, werden diese Eigenschaften an das Objekt gehängt, das vom V-Slot der übergeordneten Komponente akzeptiert wird. Die übergeordnete Komponente erhält bei Verwendung die Informationen der Unterkomponente über den V-Slot: (Abkürzung: # ) und verwenden Sie die 🎜🎜untergeordnete Komponente Child.vue🎜rrreee🎜übergeordnete Komponente🎜rrreee🎜🎜Zusammenfassung: 🎜🎜
  • 🎜v-slot Das -Attribut kann nur für <template> verwendet werden, kann aber verwendet werden, wenn nur ein Standard-Slot vorhanden ist. Verwenden Sie 🎜🎜
  • 🎜Der Standard-Slot-Name ist default auf dem Komponentenetikett können Sie <code>default weglassen und direkt v-slot schreiben. 🎜🎜
  • 🎜Wenn die Abkürzung # ist, müssen Sie den Parameter als schreiben #default🎜🎜
  • 🎜Sie können v-slot={user} durch Dekonstruktion erhalten und es auch in v-slot="{ umbenennen user: newName}" und definieren Sie den Standardwert v-slot="{user = 'default value'}"🎜🎜🎜🎜Verwandte Empfehlungen: 🎜vue.js Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonWann sollte Vue Slot verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!