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.
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可以分来以下三种：
默认插槽
具名插槽
作用域插槽
默认插槽
子组件用
父组件在使用的时候，直接在子组件的标签内写入内容即可
子组件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 = '默认值'}"
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:🎜 v-slot Das -Attribut kann nur für <template> verwendet werden, kann aber verwendet werden, wenn nur ein Standard-Slot vorhanden ist. Verwenden Sie 🎜🎜default auf dem Komponentenetikett können Sie <code>default weglassen und direkt v-slot schreiben. 🎜🎜#default🎜🎜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!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![Tatsächlicher Front-End-Vue3-Kampf [handgeschriebenes Vue-Projekt]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
