Artikelverzeichnis
Vorwort
In diesem Artikel wird kurz die Verwendung benannter Slots und bereichsbezogener Slots vorgestellt
1. Was ist ein Slot?
1. Ein Slot ist ein Platzhalter in einer untergeordneten Komponente, der der übergeordneten Komponente bereitgestellt wird. Er wird in der untergeordneten Komponente durch <slot>< /slot > dargestellt. Die übergeordnete Komponente kann jeden Vorlagencode in diesen Platzhalter füllen, z. B. HTML , Komponenten usw. ersetzt der gefüllte Inhalt die <slot>< /slot >-Tags der Unterkomponenten. (Einfach ausgedrückt bedeutet dies, ein Loch in die Unterkomponente zu graben, damit andere hineinspringen können.)
2. Nach Version 2.6.0 werden Slot und Slot-Scope durch V-Slot ersetzt.
3. Zu den Slots gehören Standard-Slots, benannte Slots und bereichsbezogene Slots
2. Vorbereitende Vorbereitung
1、通过vue-cli创建好初始化项目
2、src下创建category.vue，同时在App.vue中引入
3. Nutzung benannter Slots
1. Unterkomponenten-Konfigurationssteckplatz
Konfigurieren Sie Requisiten in der untergeordneten Komponente, erhalten Sie Informationen von der App der übergeordneten Komponente und bereiten Sie zwei Slots vor:
//category.vue
<template>
<div id="bck">
<h3>{
{
title }}</h3>
//准备两个带有不同name的插槽（可以让使用者在指定的地方显示数据）
<slot name="center">默认插槽1</slot>
<slot name="footer">默认插槽2</slot>
</div>
</template>
<script>
export default {
name: "category",
data() {
return {
};
},
props: ["title", "listData"],
};
</script>
<style scoped>
#bck {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: #bfa;
}
</style>
2. Benutzer-App.vue-Konfigurationsdaten
Durch die unterschiedlichen Namen, die in der Unterkomponentenkategorie definiert sind, können die Daten an der angegebenen Stelle angezeigt werden:
//App.vue
<template>
<div id="app">
<category title="美食">
<img
slot="center"
src="https://tse2-mm.cn.bing.net/th/id/OIP-C.wwyQPKyRH0ge8-Ppd9DSJgHaEK?w=317&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
alt=""
/>
<a slot="footer" href="https://img1.qunarzz.com/travel">更多</a>
</category>
<category title="游戏">
<ul slot="center">
<li v-for="(g, index) in game" :key="index">{
{
g }}</li>
</ul>
<div id="game" slot="footer">
<a href="https://img1.qunarzz.com/travel">单机游戏</a>
<a href="https://img1.qunarzz.com/travel">网络游戏</a>
</div>
</category>
<category title="电影">
<video
slot="center"
width=""
height=""
controls
src="https://v.qq.com/x/cover/mzc00200dwnknik.html"
></video>
<div id="game" slot="footer">
<a href="https://img1.qunarzz.com/travel">更多信息1</a>
<a href="https://img1.qunarzz.com/travel">更多信息2</a>
</div>
</category>
</div>
</template>
<script>
import category from "./components/category";
export default {
name: "app",
data() {
return {
foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"],
game: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"],
};
},
mounted() {
},
methods: {
},
components: {
category,
},
};
</script>
<style scoped>
#app,
#game {
display: flex;
justify-content: space-around;
}
img {
width: 100%;
}
video {
width: 100%;
}
</style>
3. Ergebnisanzeige
4. Zusammenfassung der benannten Slots
1. Fügen Sie nach dem Definieren des Slot-Slots Slot = „Name“ zur anzuzeigenden Beschriftung hinzu, und der anzuzeigende Inhalt kann an der angegebenen Position angezeigt werden. 2. Gleichzeitig ist zu beachten, dass die Slot-
Daten dieser Methode Das Quellspiel wird in der übergeordneten App-Komponente bereitgestellt, nicht in der untergeordneten Komponente selbst. Um die Redundanz zu reduzieren, können bereichsbezogene Steckplätze zum Speichern von Daten in der Komponente verwendet werden, die den Steckplatz selbst definiert
Viertens die Verwendung von Scope-Slots
- Erfordert, dass die anzuzeigenden Daten in den Gruppenpreis eingefügt werden, der den Slot definiert
- Die übergeordnete Komponente App.vue generiert lediglich die Struktur basierend auf den Daten, und die Daten werden in der Komponente bereitgestellt, die den Slot definiert
1. Unterkomponenten-Konfigurationssteckplatz
In untergeordneten Komponenten konfigurierte Requisiten müssen nur Header empfangen. Bereiten Sie zwei bereichsbezogene Slots vor und übertragen Sie die anzuzeigenden Daten:
//category.vue
<template>
<div id="bck">
<h3>{
{
title }}</h3>
<slot :G="games" :F="foods">作用域插槽</slot>
</div>
</template>
<script>
export default {
name: "category",
data() {
return {
foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"],
games: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"],
};
},
props: ["title"],
};
</script>
<style scoped>
#bck {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: #bfa;
}
</style>
2. Der Benutzer empfängt die Daten und legt die Struktur fest
//App.vue
<category title="游戏">
<template scope="zwt">
<!--ES6解构赋值，{
}直接拿到zwt.G的值 -->
<ul>
<li v-for="(g, index) in zwt.G" :key="index">{
{
g }}</li>
</ul></template
>
</category>
<category title="美食">
<template scope="{F}">
<!--ES6解构赋值，{
}直接拿到zwt.F的值 -->
<ol >
<li v-for="(f, index) in F" :key="index">{
{
f}}</li>
</ol>
</template>
</category>
3. Ergebnisanzeige
4. Zusammenfassung des Scope-Slots
1. Es kann das Problem lösen, dass in der Benutzerkomponente keine Daten zum Anzeigen vorhanden sind, und kann beim Aufrufen von Daten aus anderen Komponenten verwendet werden.
2. Die Komponente, die den Steckplatz definiert, überträgt ihre eigenen Daten an den Benutzer, und der Benutzer konfiguriert die Struktur, nachdem er die Daten empfangen hat.
3. Der Benutzer bestimmt nur den generierten Strukturstil und die Daten werden vom Benutzer (der Komponente, die den Slot definiert) übertragen.
4. Es versteht sich, dass Slot bedeutet, dass die übergeordnete Komponente eine bestimmte Struktur an der angegebenen Position der untergeordneten Komponente einfügt.