VUEコンポーネント化理解(二)v-slotの使用

VUEコンポーネント化理解(二)v-slotの使用
1.スロットのコンセプト
childコンポーネントのラベルを開くと閉じるラベルの間の内容は通常ページに表示されません.彼に表示させるには、slotラベルでこれらの内容を表し、どこに表示させるかテンプレートのどこに置くかを示します.
スロットの理解:
コンポーネントはカプセル化されたhtmlに相当し、スロットはカプセル化関数のパラメータに相当し、呼び出すたびに異なる値を与えることができるものです.
2.名前付きスロット(nameプロパティを渡す)
child開ラベルと閉ラベルの間に置かれたテンプレートまたはコンポーネントにv-slot:名前をカスタマイズするコマンドを付け、使用するときにslotラベルを使用し、サブコンポーネントの中にname=「名前をカスタマイズ」を追加し、nameプロパティでどのスロットを呼び出すかを選択します.親コンポーネントの一部にslotプロパティが追加されていない場合は、ここがデフォルトのスロットです.サブコンポーネントのslotは、使用する親コンポーネントのデフォルトのスロット部分です.
3.バックアップ内容
スロットの内容が一致しないときに、ラベルの内容がレンダリングされます.
4.スコープスロット
スロットはこのコンポーネントに属しているが、コンポーネントのテンプレートに入れていないため、コンポーネントのdataデータを直接使用することはできない.コンポーネントのdataを使用するには、属性伝達の方法でスロットにv-slot:xx=""などの番号の後面の値でデータを受信する必要がある.受信したデータはjsonです.1つの値だけが伝わる可能性があります.

提供されたコンテンツが1つのデフォルトスロットしかない場合、コンポーネントのラベルは、

を使用するためにスロットのテンプレートとして直接使用することができる.

ダイナミックパラメータもスロット

に使用できる.

v-slotの略は#ですが、#を使用する場合は

の代わりに常にスロットを使用する必要があります.
サブアセンブリ定義

<template id="login">
    <div>
        <header>
            <slot name="head" :textcon="text" ></slot>
        </header>
        <p>{{text}}</p>
        <slot>AA</slot>
        <!--       slot   ，                  AA，          AA -->
        <footer>
            <slot name="foot"></slot>
        </footer>
    </div>
</template>
<script src="lib/vue.js"></script>
<script>
    Vue.component("child", {
        template: "#login",
        data() {
            return {
                text: "      ",
            }
        },
    })

    var vm = new Vue({
        el: "#app",
    })
</script>

親コンポーネント呼び出し

vue v 2.6.0では、slotとslot-scopeの2つが現在廃棄されているが除去された特性に取って代わってv-slot命令が新たに導入された.