Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明

<div id="アプリ">
    <子供>
        <span>1111</span>    
    </子>
</div>


<スクリプト>
    // 子コンポーネントを登録する Vue.component("child", {
        テンプレート: "<div>これは div タグです</div>"
    });

    // 親コンポーネントを初期化する new Vue({
        el: "#app"
    });
</スクリプト>

<div id="アプリ">
    <子供>
        <span>1111</span>    
    </子>
</div>


<スクリプト>
    // 子コンポーネントを登録する Vue.component("child", {
        テンプレート: "<div>これは <slot></slot>div タグ</div> です"
    });

    // 親コンポーネントを初期化する new Vue({
        el: "#app"
    });
</スクリプト>

<div id="アプリ">
    <子供>
        <span>1111</span>   
        2222年
        <b>3333</b>
    </子>
</div>


<スクリプト>
    // 子コンポーネントを登録する Vue.component("child", {
        テンプレート: "<div>これは <slot></slot>div タグ</div> です"
    });

    // 親コンポーネントを初期化する new Vue({
        el: "#app"
    });
</スクリプト>

<div id="アプリ">
    <子供>
        <span slot="one">1111</span>
        <i slot="two">2222</i>
        <b スロット="3">3333</b>
    </子>
</div>


<スクリプト>

    // 子コンポーネントを登録する Vue.component("child", {
        テンプレート: `<div>
                        これは <slot name='one'></slot> です
                        1 つの <slot name='two'></slot>
                        分割
                        <スロット名='3'></スロット>
                        タグ </div>`
    });


    // 親コンポーネントを初期化する new Vue({
        el: "#app"
    });
</スクリプト>

    <div id="アプリ">
        <子供>
            <!-- <span slot="one">1111</span> -->
            <i slot="two">2222</i>
            <!-- <b slot="three">3333</b> -->
        </子>
    </div>

    <スクリプト>
        // 子コンポーネントを登録する Vue.component("child", {
            テンプレート: `<div>
                            <slot name='one'>誰も</slot>
                            <slot name='two'>いいえ 2</slot>
                            <slot name='three'>3 ではない</slot>
                        </div>`

        });

        // 親コンポーネントを初期化する new Vue({
            el: "#app"
        });
    </スクリプト>

<本文>
    <div id="アプリ">
        <コンピュータ>
            <div slot="CPU">インテル Core i7</div>
            <div slot="GPU">GTX980Ti</div>
            <div slot="メモリ">キングストン 32G</div>
            <div slot="ハードドライブ">Samsung SSD 1T</div>
        </コンピュータ>
    </div>

    <スクリプト>
        // サブコンポーネントを登録する Vue.component("computer", {
            テンプレート: `<div>
                            <slot name="CPU">ここに CPU を接続します</slot>
                            <slot name="GPU">ここにグラフィック カードを接続します</slot>
                            <slot name="Memory">ここにメモリを挿入します</slot>
                            <slot name="Hard-drive">ここにハードドライブを接続します</slot>
                        </div>`
        });

        // 親コンポーネントを初期化する new Vue({
            el: "#app"
        });
    </スクリプト>
</本文>

<div id="アプリ">
    <子供>
    	<!-- 2. スコープが { "myName": "猫老板的豆" } に設定された myName データを受信します -->
        <テンプレート スロット="コンテンツ" スロット スコープ="スコープ指定"> 
            <div>{{ スコープ付き.myName }}</div>
        </テンプレート>
    </子>
</div>

<スクリプト>
	Vue.component('child', {
		データ （） {
			戻る {
				私の名前: 「猫のボスの豆」
			}
		},
		テンプレート: `<slot name="content" :myName="myName"></slot>` // 1. myName データを破棄します })
	
	新しいVue({
		el: "#app"
	});
</スクリプト>

<!-- 親コンポーネント -->
<テンプレート>
	<子供>
		<!-- Vue2.x の記述 <div slot="parent">
            <div>親コンポーネント</div>
		</div>
		 -->
		<テンプレート v-slot:親>
            <div>親コンポーネント</div>
        </テンプレート>
	</子>
</テンプレート>


<!-- 子コンポーネント -->
<テンプレート>
	<slot name='parent'>子コンポーネント</slot>
</テンプレート>

<テンプレート>
	<子供>
		<!-- <テンプレート スロット="コンテンツ" スロット スコープ="スコープ付き"> -->
		<テンプレート v-slot:content="scoped">
			<div>{{scoped.myName}}</div>
		</テンプレート>
	</子>
</テンプレート>

<テンプレート>
	<スロット名="コンテンツ" :myName="私の名前"></スロット>
</テンプレート>

<スクリプト>

'vue' から { ref } をインポートします
エクスポートデフォルト{
	設定 （） {

		let myName = ref("ミスター・キャッツ・ビーン")

		{ myName } を返します
	},
}
</スクリプト>