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

1. 匿名スロット

デフォルトスロット: 匿名スロットとも呼ばれ、スロットで名前属性値が指定されていない場合のデフォルトの表示スロットです。コンポーネントには匿名スロットが 1 つだけあります。

例：

まずVueインスタンスを作成し、idがappのdivにマウントします。

<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インスタンスのサブコンポーネントセンターにローカルコンポーネントを定義し、ビューレイヤーにレンダリングします。

  // ルート コンポーネント (親コンポーネント、ベース コンポーネントとも呼ばれる)
        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>
        </子>

2. 名前付きスロット

子コンポーネントでスロットを定義するときは、対応するスロットに名前を付けて、その後の親コンポーネントの挿入を容易にし、名前に従って対応するコンテンツを埋めます。

まず、子コンポーネントでスロットに名前を付けます (匿名スロットには実際にはデフォルト名 default がありますが、これは省略できます)。

 テンプレート:`
            <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>
            `、

名前付きスロットを使用するメソッド

1. サブコンポーネント内のスロットを定義し、名前を付ける

2. 親コンポーネントのビューレイヤーのタグに、タグにスロット属性を追加します。

このプロパティには特定のスロットの名前を割り当てることができます

 <子供>
            <!-- この時点では、これら 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>
        </子>