Vue erläutert ausführlich die Steckplätze, um die Skalierbarkeit der Komponenten zu erhöhen

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】

Slot-Slot

Component-Slot

• 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.

Wie kapselt man solche Komponenten? Slot

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.

Wie verpacke ich es richtig?

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.

Grundlegende Verwendung von Slots

• In einer Unterkomponente können Sie spezielle Elemente verwenden, um einen Slot für die Unterkomponente zu öffnen.
• Was in diesen Steckplatz eingefügt wird, hängt davon ab, wie die übergeordnete Komponente verwendet wird.

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 id="我是子组件">我是子组件</h2>
            <h3 id="hahaha">hahaha</h3>
            <slot></slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                }
            }
        })
    </script>

具名插槽 slot

当子组件的功能复杂时，子组件的插槽可能并非是一个。

比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？

如何使用具名插槽呢？

• 只要给slot元素一个name属性即可
• <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 id="我是子组件">我是子组件</h2>
            <h3 id="hahaha">hahaha</h3>
            <slot></slot><br>
            <slot></slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                }
            }
        })
    </script>

作用域插槽

实质：

父组件替换插槽的标签，但是内容由子组件来提供。

需求：

子组件中包括一组数据，比如：pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
需要在多个界面进行展示：

• 某些界面是以水平方向一一展示的
• 某些界面是以列表形式展示的
• 某些界面直接展示一个数组

内容在子组件，希望在父组件中展示：

• 利用slot作用域插槽

在父组件使用我们的子组件时，从子组件中拿到数据：

• 通过<template slot-scope="slotProps"></template>获取到slotProps属性
• 通过slotProps.data Slot

Wenn 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>

🎜🎜Scope-Slot🎜🎜

Essenz: 🎜🎜Die übergeordnete Komponente ersetzt die Bezeichnung des Slots, der Inhalt wird jedoch von der untergeordneten Komponente bereitgestellt🎜. 🎜

Anforderungen:

🎜Die Unterkomponente enthält einen Satz von Daten, wie zum Beispiel: 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>



    
    
    
    <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: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                    data() {
                        return {
                            pLanguages: [&#39;JavaScript&#39;, &#39;Python&#39;, &#39;Swift&#39;, &#39;Go&#39;, &#39;C++&#39;],
                        }
                    }
                }
            }
        })
    </script>

🎜🎜rrreee🎜 abrufen [Verwandte Empfehlungen: 🎜Javascript-Video-Tutorial🎜, 🎜vue.js-Tutorial🎜]🎜

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!