Vue の匿名スロットと名前付きスロットの詳細な説明

<div id="アプリ">
 
    </div>
 
    <script src="./js/vue.js"></script>
    <スクリプト>
 
        // ルート コンポーネント (親コンポーネント、ベース コンポーネントとも呼ばれる)
        vm = new Vue({
            el:'#app',
        })
    </スクリプト>

 // ローカルコンポーネントを宣言する let child = {
            テンプレート:`
            <div>
                <p>私はサブコンポーネントです</p>
                <p>私は言葉の列です</p>
                <slot>これはプレースホルダーです</slot>
            </div>
            `
        }

  // ルート コンポーネント (親コンポーネント、ベース コンポーネントとも呼ばれる)
        vm = new Vue({
            el:'#app',
 
            // サブコンポーネント（登録センター）
            コンポーネント:{
                // キーと値のペア。キーと値が同じ場合は子を省略できます
            }
        })

<div id="アプリ">
 
        <!-- コンポーネントの使用 -->
        <子></子>
    </div>

 <!-- コンポーネントの使用 -->
        <子供>
            <h1 style="color: aqua;">これはコンテンツです</h1>
        </子>

 テンプレート:`
            <div>
                <p>私はサブコンポーネントです</p>
                <p>私は言葉の列です</p>
                <slot>これはプレースホルダーです</slot>
                <スロット></スロット>
                <スロット></スロット>
            </div>
            `

<子供>
            <h1 style="color: aqua;">これが最初のコンテンツです</h1>
            <h1 style="color: red;">この 2 番目のコンテンツ</h1>
        </子>

 テンプレート:`
            <div>
                <p>私はサブコンポーネントです</p>
                <p>私は言葉の列です</p>
                <slot name="default">これはプレースホルダーです</slot>
                <slot name="t1">これは t1 プレースホルダーの内容です</slot>
                <slot name="t2">これは t2 プレースホルダーの内容です</slot>
                <slot name="t3">これは t3 プレースホルダーの内容です</slot>
                <slot name="t5">これはt4の内容です</slot>
            </div>
            `、

 <子供>
            <!-- この時点では、これら 2 つの文はまだ匿名スロットに配置されています -->
            <h1 style="color: aqua;">これが最初のコンテンツです</h1>
            <h1 style="color: red;">この 2 番目のコンテンツ</h1>
 
                <!-- slot="t1" はコンテンツを配置するスロットを指定します -->
            <h2 style="color: blue;" slot="t1">名前付きスロット t1 で使用したい</h2>
            <h3 style="color: green;" slot="t2">名前付きスロット t2 で使用したい</h3>
            <h4 style="color: orange;" slot="t3">t3 という名前のスロットに配置したい</h4>
            <h5 style="color: pink;" slot="t4">t4 という名前のスロットで使用したい</h5>
        </子>