Vue のスロットについて学ぶ-Vue.js-php.cn

Vue のスロットについて学ぶ

青灯夜游

リリース： 2020-10-14 17:41:45

転載

2400 人が閲覧しました

Vue のスロットについて学ぶ

Vue スロットは Vue を学ぶ上で欠かせない部分ですが、私が初めて Vue に触れたとき、特にスコープスロットについては少ししか理解していませんでした。

その後、スロットがますます便利であることがわかりました。

スロットに関する知識を共有しましょう。

1. スロットのコンテンツ

一文: スロットには任意のコンテンツを含めることができます。

まず、次のコードを見てください: 子コンポーネントコンポーネントを宣言します。

内にコンテンツを配置したい場合、結果はどうなるでしょうか？

<div id="app">
    <child-component></child-component>

</div>
<script>
    Vue.component(&#39;child-component&#39;,{
        template:`
            <div>Hello,World!</div>
        `
    })
    let vm = new Vue({
        el:&#39;#app&#39;,
        data:{

        }
    })
</script>

ログイン後にコピー

<child-component>你好</child-component>

ログイン後にコピー

出力内容はコンポーネント内の内容のままであり、に記述された内容は影響しません。

Vue のスロットについて学ぶ

ここで、スロットをコンポーネントに追加します。

現在は、に書かれた「Hello」は機能します。！！

Vue.component(&#39;child-component&#39;,{
        template:`
            <div>
            Hello,World!
            <slot></slot>
            </div>
        `
    })

ログイン後にコピー

Vue のスロットについて学ぶ

これで、スロットとは何かが分かりました:

スロットは、Vue によって実装されたコンテンツ配布 API のセットであり、要素は、配布コンテンツを運ぶための出口として機能します。

この文が意味するのは、スロットがない場合、コンポーネントタグ内の一部の内容は何の効果も持たないということです。コンポーネント内でスロット要素を宣言すると、コンポーネント要素に書かれた内容が中はそれに行きます！

2. 名前付きスロット

名前付きスロットは、スロットに名前を付けるものです

コンポーネント内で、スロットに名前を付けます。名前は3つあり、1つは「女の子」、1つは「男の子」、そして1つは名前がありません。

では、slot 属性に対応するコンテンツがコンポーネント内の名前と 1 対 1 に対応します。

名前のないスロットはデフォルトのスロットです。！

<div id="app">
    <child-component>
        <template slot="girl">
            漂亮、美丽、购物、逛街
        </template>
        <template slot="boy">
            帅气、才实
        </template>
        <div>
            我是一类人，
            我是默认的插槽
        </div>
    </child-component>
</div>
<script>
    Vue.component(&#39;child-component&#39;,{
        template:`
            <div>
            <h4>这个世界不仅有男人和女人</h4>

            <slot name="girl"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot name="boy"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot></slot>
            </div>
        `
    })
    let vm = new Vue({
        el:&#39;#app&#39;,
        data:{

        }
    })
</script>

ログイン後にコピー

3. スコープスロット

スコープスロットが何なのか、これまで全く理解していませんでした。！！

率直に言うと、これはコンポーネント上の私の属性であり、コンポーネント要素内で使用できます。

最初に最も単純な例を見てみましょう。！

要素に属性を定義し (好きなように定義してください!)、コンポーネントの子を使用して、属性スロットスコープをテンプレート要素に追加します。！！これに a

という名前を付けて、 a を出力すると、それが {"say" : "Hello"} であることがわかります。これは、スロットの属性と値で構成されるキーと値のペアです。！！

これはスコープスロットです。

コンポーネントの属性/値をコンポーネント要素で使用できるようになりました。！

<div id="app">
    <child>
        <template slot-scope="a">
　　　　　　<!-- {"say":"你好"} -->

            {{a}}
        </template>
    </child>
</div>
<script>
    Vue.component(&#39;child&#39;,{
        template:`
            <div>
                <slot say="你好"></slot>
            </div>
        `
    })

    let vm = new Vue({
        el:&#39;#app&#39;,
        data:{

        }
    })
</script>

ログイン後にコピー

次の例をもう一度見てください:

<div id="app">
    <child :lists="nameList">
        <template slot-scope="a">
            {{a}}
        </template>
    </child>
</div>
<script>
    Vue.component(&#39;child&#39;,{
        props:[&#39;lists&#39;],
        template:`
            <div>
                <ul>
                    <li v-for="list in lists">
                        <slot :bbbbb="list"></slot>
                    </li>
                </ul>
            </div>
        `
    })

    let vm = new Vue({
        el:&#39;#app&#39;,
        data:{
            nameList:[
            {id:1,name:&#39;孙悟空&#39;},
            {id:2,name:&#39;猪八戒&#39;},
            {id:3,name:&#39;沙和尚&#39;},
            {id:4,name:&#39;唐僧&#39;},
            {id:5,name:&#39;小白龙&#39;},
            ]
        }
    })
</script>

ログイン後にコピー

出力結果を見てください

Vue のスロットについて学ぶ