vueでのslotスロットの使用

どうしてslotを使うの?
既存のレイアウトコンポーネントは、特定の場所に内容を埋め込むだけで、必要な効果を表示できます.しかし、ここでは直接内容を埋め込むことはできません.そうすれば、このグループの価格は意味がありません.レイアウトコンポーネントにすぎません.
レイアウトコンポーネントがあるならvueは、いろいろなスタイルが書かれていて、内容を伝えるだけで効果が見えます.

export default {
    name:'slotSun'
}

このコンポーネントをvueプロジェクトに導入します

import slotSun from '@/components/slotSun.vue'
export default {
    components:{
        slotSun
    }
}

私たちの普段のhtmlノードの考えによると、slotコンポーネントにコンテンツを追加したい場合は、まずこのように書くことを考えます.

このときブラウザを開いてみると、ページにはレイアウトコンポーネントしか表示されていません.this is contentとは普通の親子ノード関係ではありませんので、slotを使用する必要があります.
slotのいくつかの使用方法
1.スロットの直接使用
コンポーネント内でコンテンツを送信する必要がある場所でslotを直接宣言できます.
レイアウトコンポーネント:

親コンポーネント

このときspanの内容が表示されます.
2.名前付きスロットの使用
コンポーネントに複数のコンテンツを転送して異なる場所に配置する必要がある場合は、名前付きスロットを使用してそれぞれ挿入できます.
レイアウトコンポーネント:

親コンポーネント:

3.スロットの役割ドメインの使用
親コンポーネントで子コンポーネントの値を呼び出す必要がある場合があります.この場合、次のように参照できます.
レイアウトコンポーネント:

親コンポーネント:

ここでspanラベルにを追加すると、propsはspanラベルに特有のオブジェクトに相当し、サブアセンブリスロットから伝達された値が格納されます.構造は次のとおりです.

{
    name:'wang',
    age:'20'
}

これでspanタグで直接呼び出すことができます.