1編でslotスロットをクリア

vueでは、親コンポーネントのコンテンツとサブコンポーネントのテンプレートを統合する方法を提供しています.コンテンツの配布は、slotスロットで実現されます.
コンポーネントラベルの内部に書き込まれたコンテンツはデフォルトで置き換えられます.コンポーネントのテンプレートでこれらのコンテンツを使用する場合は、対応する場所にslotラベルを書きます.このslotラベルはこれらのコンテンツを表します.
匿名スロット
親コンポーネントでサブコンポーネントを使用する場合、サブコンポーネントラベルの内部に書かれた内容は、サブコンポーネントのテンプレートで使用できます.

        
            
slot       
        
    

    

めいめいみぞ
親コンポーネントのサブコンポーネントラベルに書かれた複数のコンテンツにslotプロパティを設定して名前を付けることができます.サブコンポーネントのテンプレートにnameプロパティのあるslotラベルを使用して対応するslotを配置し、slotが存在しない場合、slotラベルに書かれたコンテンツが表示されます.
slotの上にnameプロパティでスロット名を指定し、使用するときにslot=「スロット名」を使用します.

slotスロットでは、既存のテンプレートに基づいて、より多様なコンポーネントをカスタマイズできます.
アクティブドメインスロット
親コンポーネントでサブコンポーネント内部のデータにアクセスするには、サブコンポーネント内部の要素にカスタム属性を動的にバインドし、カスタム属性にデータを渡し、slotを介して親コンポーネントに渡して使用する必要があります.

要素にバインドされたプロパティをslot propsと呼びます.親コンポーネントでは、すべてのスロットpropを含むオブジェクトにslot-scopeでpropと名前を付けることができ、その後、サブコンポーネントのデータをpropで使用することができます.

v-slot v-slotは、Vue 2.6から指令する.0から導入され、より良いサポートを提供slotおよびslot-scope特性のAPI代替スキーム.次のすべての2.xバージョンslotおよびslot-scopeの特性は依然としてサポートされているが、公式に廃棄され、Vue 3には現れない.v-slotを使用して、上記のコードを再構築します.

nameを持たない出口には、「default」という名前が隠されており、使用時にv-slot="prop“に簡略化することができます.
めいめいみぞ
サブアセンブリでnameプロパティでスロットに名前を設定する

親アセンブリでは、v-slot: で名前付きスロットを使用します.

親コンポーネントでサブコンポーネントを複数回呼び出すと、異なるスタイルを設定することで、ステータコンポーネント内のデータの表示形式を設定できます.
親子コンポーネント通信事例
アトリビュートバインドとv-slotでは、サブコンポーネントで親コンポーネントのデータをループレンダリングすることもできます.
まず、親コンポーネントでデータのセットを定義します.

data(){
      return{
        listData:[
          {
            name:"Tome",
            job:"web  "
          },
          {
            name:"Lily",
            job:"java"
          }
        ]
      }
    }

属性バインドによりサブコンポーネントホームにデータを渡し、v-slotスロットオブジェクト名を設定すると、スロット内部でpropでデータにアクセスできます.

ホームコンポーネントで親コンポーネントから渡されたdataを受信

props:{
    data:{
      type:Array,
      required:true
    }
  }

dataをslotのカスタムプロパティリストに渡す

Childアセンブリをホームアセンブリのslotスロットに挿入する、Childアセンブリはpropを通過することができる.Listはデータをループレンダリングし、itemを属性バインドによってChildに渡す

ChildコンポーネントでHomeから渡されたdataを受信

props:{
    data:{
      type:Object,
      required:true
    }
  }

ページ内でkey名でデータをレンダリング

    
{{data.name}}
    
{{data.job}}
  

レンダリング結果: