vueのslot(スロット)

4427 ワード

最近、いくつかのコンポーネントを書くのに忙しいので、スロットについて自分でslotとslot-scopeを使って、ドキュメントの更新を見て、「スロット」をもう一度勉強しました.次の段落はドキュメントの説明です.
2.6.0では、名前付きスロットと役割ドメインスロットに新しい統合構文(v-slot命令)を導入しました.slotslot-scopeの2つの現在廃棄されているが除去されておらず、ドキュメントに残っている特性に取って代わります.新しい文法の由来はこのRFCを調べることができる.
スロット、つまりslot、slotはサブコンポーネントの中の1つのプレースホルダで、1つのslotの核心の問題、1つのslotの核心の問題、表示しないで、表示するならば、どのように展示して、これは親コンポーネントが制御したので、しかしスロットの表示の位置はサブコンポーネントが自分で決めたので、slotはコンポーネントtemplateのどんな位置に書いて、親コンポーネントから渡されたテンプレートがどこに表示されますか.
スロットの基本的な使い方(匿名スロット)
これはサブアセンブリです.デフォルトのスロット(匿名スロット)を使用すると、親コンポーネントの内容が表示される代わりに表示されます.


export default {
  name: 'children'
}

//   children  
   slot   

レンダリング後の結果


名前付きスロット
2.6.0から更新されました.slotの特性を使用して廃棄された構文は、ここにある.
1つのコンポーネントに複数のスロットが必要な場合があります.複数のslotをどのように区別するか、slotの表示位置にも違いがあります.このような場合、要素にはnameという特殊な特性があります.この機能は、追加のスロットを定義するために使用できます.
  • 注意:nameを持たない出口には「default」という名前が隠されています.

  • 次のコンポーネントのように、複数のスロットが必要です.コンポーネントにコンテンツをどのように提供しますか?
    
    

    名前付きスロットにコンテンツを提供する場合は、1つの要素でv-slotコマンドを使用し、v-slotパラメータの形式で名前を指定できます.
    
    
      
      
    
    
    
    
      
      
    
    

    レンダリング後の結果
    
    
  • 注意:v-slotは、1つの