Detaillierte Erklärung zur Verwendung von Scoped Slots in Vue.js-Slots

<div id="app">
    <Kind>
        <span>1111</span>    
    </child>
</div>


<Skript>
    // Untergeordnete Komponente registrieren Vue.component("child", {
        Vorlage: "<div>Dies ist ein Div-Tag</div>"
    });

    // Initialisiere die übergeordnete Komponente new Vue({
        el: "#app"
    });
</Skript>

<div id="app">
    <Kind>
        <span>1111</span>    
    </child>
</div>


<Skript>
    // Untergeordnete Komponente registrieren Vue.component("child", {
        Vorlage: „<div>Dies ist <slot></slot>ein Div-Tag</div>“
    });

    // Initialisiere die übergeordnete Komponente new Vue({
        el: "#app"
    });
</Skript>

<div id="app">
    <Kind>
        <span>1111</span>   
        <i>2222</i>
        <b>3333</b>
    </child>
</div>


<Skript>
    // Untergeordnete Komponente registrieren Vue.component("child", {
        Vorlage: „<div>Dies ist <slot></slot>ein Div-Tag</div>“
    });

    // Initialisiere die übergeordnete Komponente new Vue({
        el: "#app"
    });
</Skript>

<div id="app">
    <Kind>
        <span slot="eins">1111</span>
        <i slot="zwei">2222</i>
        <b slot="drei">3333</b>
    </child>
</div>


<Skript>

    // Untergeordnete Komponente registrieren Vue.component("child", {
        Vorlage: `<div>
                        Dies ist <slot name='one'></slot>
                        Eins <slot name='zwei'></slot>
                        div
                        <slot name='drei'></slot>
                        Schlagworte </div>`
    });


    // Initialisiere die übergeordnete Komponente new Vue({
        el: "#app"
    });
</Skript>

    <div id="app">
        <Kind>
            <!-- <span slot="one">1111</span> -->
            <i slot="zwei">2222</i>
            <!-- <b slot="drei">3333</b> -->
        </child>
    </div>

    <Skript>
        // Untergeordnete Komponente registrieren Vue.component("child", {
            Vorlage: `<div>
                            <slot name='one'>niemand</slot>
                            <slot name='two'>keine zwei</slot>
                            <slot name='three'>keine drei</slot>
                        </div>`

        });

        // Initialisiere die übergeordnete Komponente new Vue({
            el: "#app"
        });
    </Skript>

<Text>
    <div id="app">
        <Computer>
            <div Steckplatz="CPU">Intel Core i7</div>
            <div slot="GPU">GTX980Ti</div>
            <div slot="Speicher">Kingston 32G</div>
            <div slot="Festplatte">Samsung SSD 1T</div>
        </computer>
    </div>

    <Skript>
        // Unterkomponente registrieren Vue.component("computer", {
            Vorlage: `<div>
                            <slot name="CPU">Schließen Sie hier Ihre CPU an</slot>
                            <slot name="GPU">Schließen Sie hier Ihre Grafikkarte an</slot>
                            <slot name="Memory">Fügen Sie hier Ihre Erinnerung ein</slot>
                            <slot name="Festplatte">Schließen Sie hier Ihre Festplatte an</slot>
                        </div>`
        });

        // Initialisiere die übergeordnete Komponente new Vue({
            el: "#app"
        });
    </Skript>
</body>

<div id="app">
    <Kind>
    	<!-- 2. Empfangen Sie myName-Daten mit dem Gültigkeitsbereich { "myName": "猫老板的豆" } -->
        <template slot="Inhalt" slot-scope="Bereich"> 
            <div>{{ scoped.meinName }}</div>
        </Vorlage>
    </child>
</div>

<Skript>
	Vue.Komponente('Kind', {
		Daten () {
			zurückkehren {
				meinName: ‚Cat Boss‘s Beans‘
			}
		},
		Vorlage: `<slot name="content" :myName="myName"></slot>` // 1. myName-Daten wegwerfen })
	
	neuer Vue({
		el: "#app"
	});
</Skript>

<!-- Übergeordnete Komponente -->
<Vorlage>
	<Kind>
		<!-- Vue2.x schreibt <div slot="parent">
            <div>übergeordnete Komponente</div>
		</div>
		 -->
		<Vorlage v-slot:übergeordnet>
            <div>übergeordnete Komponente</div>
        </Vorlage>
	</Kind>
</Vorlage>


<!-- Untergeordnete Komponente -->
<Vorlage>
	<slot name='parent'>untergeordnete Komponente</slot>
</Vorlage>

<Vorlage>
	<Kind>
		<!-- <template slot="content" slot-scope="scoped"> -->
		<template v-slot:content="scoped">
			<div>{{scoped.meinName}}</div>
		</Vorlage>
	</Kind>
</Vorlage>

<Vorlage>
	<slot name="content" :meinName="meinName"></slot>
</Vorlage>

<Skript>

importiere { ref } von 'vue'
Standard exportieren {
	aufstellen () {

		let meinName = ref("Mr. Cat's Bean")

		return { meinName }
	},
}
</Skript>