Dieser Artikel bringt Ihnen relevantes Wissen über vue, in dem hauptsächlich die Probleme im Zusammenhang mit Slots vorgestellt werden, die die Skalierbarkeit von Komponenten erhöhen. Die Slots von Komponenten dienen auch dazu, die von uns gekapselten Komponenten skalierbarer zu machen, sodass Benutzer entscheiden können, welchen Inhalt sie haben Schauen wir uns das Innere der Komponente an. Ich hoffe, es wird für alle hilfreich sein.
【Verwandte Empfehlungen: Javascript-Video-Tutorial, vue.js-Tutorial】
Component-Slot ist auch für uns Isolierte Komponenten sind besser skalierbar .
Ermöglicht Benutzern die Entscheidung, welche Inhalte innerhalb der Komponente angezeigt werden sollen.
Sie haben auch viele Unterschiede, aber sie haben auch viele Gemeinsamkeiten.
Wenn wir eine Komponente einzeln kapseln, ist dies offensichtlich unangemessen: Wenn beispielsweise jede Seite zurückgegeben wird, müssen wir diesen Teil des Inhalts wiederholt kapseln.
Es erscheint jedoch unvernünftig, wenn wir sie in einem zusammenfassen: Einige sind Menüs auf der linken Seite, einige sind Return-Menüs, einige sind Suchvorgänge in der Mitte, einige sind Text usw.
Gemeinsamkeiten extrahieren und Unterschiede beibehalten.
Der beste Weg zur Kapselung besteht darin, Gemeinsamkeiten in Komponenten zu extrahieren und verschiedeneals Slots freizulegen.
Sobald wir den Slot reserviert haben, kann der Benutzer nach seinen eigenen Bedürfnissen entscheiden, welche Inhalte er in den Slot einfügen möchte.
Handelt es sich um ein Suchfeld, einen Text oder ein Menü? Die Entscheidung liegt beim Anrufer.
Verwenden Sie ein einfaches Beispiel, um einen Slot für eine Unterkomponente zu definieren: Der Inhalt in <slot></slot> bedeutet, dass dieser standardmäßig angezeigt wird, wenn kein anderer Inhalt in die Komponente eingefügt wird . Inhalt <slot></slot>中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容
nbsp;html>
<meta>
<meta>
<title>Document</title>
<script></script>
<div>
<cpn><button>按钮</button></cpn>
<cpn><span>aaaaa</span></cpn>
</div>
<template>
<div>
<h2>我是子组件</h2>
<h3>hahaha</h3>
<slot></slot>
</div>
</template>
<script>
let app = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn',
}
}
})
</script>
当子组件的功能复杂时，子组件的插槽可能并非是一个。
比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
如何使用具名插槽呢？
<slot name="'myslot'"></slot>nbsp;html>
<meta>
<meta>
<title>Document</title>
<script></script>
<div>
<cpn><button>按钮1</button></cpn>
<cpn><span>aaaaa</span>
<button>按钮2</button></cpn>
</div>
<template>
<div>
<h2>我是子组件</h2>
<h3>hahaha</h3>
<slot></slot><br>
<slot></slot>
</div>
</template>
<script>
let app = new Vue({
el: '#app',
components: {
cpn: {
template: '#cpn',
}
}
})
</script>
父组件替换插槽的标签，但是内容由子组件来提供。
子组件中包括一组数据，比如：pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
需要在多个界面进行展示：
内容在子组件，希望在父组件中展示：
在父组件使用我们的子组件时，从子组件中拿到数据：
<template slot-scope="slotProps"></template>获取到slotProps属性slotProps.data SlotWenn die Funktion der Unterkomponente komplex ist, ist der Slot 
der Unterkomponente möglicherweise kein einziger
Wenn wir beispielsweise eine Unterkomponente einer Navigationsleiste kapseln, benötigen wir möglicherweise drei Steckplätze, die jeweils den linken, mittleren und rechten Bereich darstellen. Wie kann man also beim Einfügen von Inhalten in den Steckplatz unterscheiden, welcher Inhalt eingefügt wird? Wie verwende ich benannte Slots?
🎜Geben Sie dem Slot-Element einfach ein Namensattribut🎜🎜<slot name="myslot"></slot>🎜🎜<div>
<cpn></cpn>
<cpn>
<template>
<span>{{slot.data.join('-')}}</span>
</template>
</cpn>
<cpn>
<template>
<span>{{slot.data.join('*')}}</span>
</template>
</cpn>
</div>pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++'] Code >🎜 Muss auf mehreren Schnittstellen angezeigt werden: 🎜🎜🎜Einige Schnittstellen werden einzeln in horizontaler Richtung angezeigt🎜🎜Einige Schnittstellen werden in Listenform angezeigt🎜🎜Einige Schnittstellen zeigen direkt ein Array an🎜🎜🎜Der Inhalt befindet sich im Unterkomponente, hoffe, in der übergeordneten Komponente angezeigt zu werden: 🎜🎜🎜🎜Verwenden Sie den Slot-Scope-Slot 🎜🎜🎜🎜Wenn die übergeordnete Komponente unsere untergeordnete Komponente verwendet, rufen Sie die Daten von der untergeordneten Komponente ab: 🎜🎜🎜über <code> Holen Sie sich das SlotProps-Attribut🎜🎜Sie können die Daten, die wir gerade übergeben haben, über slotProps.data🎜🎜<template>
<div>
<slot>
<ul>
<li>{{item}}</li>
</ul>
</slot>
</div>
</template>nbsp;html>Document <script></script> <div> <cpn></cpn> <cpn> <template> <span>{{slot.data.join('-')}}</span> </template> </cpn> <cpn> <template> <span>{{slot.data.join('*')}}</span> </template> </cpn> </div> <template> <div> <slot> <ul> <li>{{item}}</li> </ul> </slot> </div> </template> <script> let app = new Vue({ el: '#app', components: { cpn: { template: '#cpn', data() { return { pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++'], } } } } }) </script>
Das obige ist der detaillierte Inhalt vonVue erläutert ausführlich die Steckplätze, um die Skalierbarkeit der Komponenten zu erhöhen. 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
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
