Vueのスロットスロット

1つのスロットを使用するのは簡単

VUE例:

画像

MyTemplateにコンポーネントテンプレート:

画像

HTML:

画像

SUMMARY私のテンプレートタグは、タグmyTmplateアセンブリスロットの内容を置き換えます、私のテンプレートタグ何もない場合、デフォルトの表示myTmplateタグアセンブリスロット。

2つのという名前のスロット

MyTemplateにコンポーネントテンプレート:

画像

HTML:

画像

MyTemplateに組み立てスロットタグにname属性を追加することによって、カスタム名を指定します

そして、対応するスロットのラベルをカバーするために、name属性がタグスロットの値であり、スロットに私のテンプレートタグボタンタグを属性を追加

3スコープスロット

MyTemplateにコンポーネントテンプレート:

画像

HTML:

画像

出典:

画像

役割:親コンポーネントを介して、表示モードのサブアセンブリの内容を変更します

MyTemplateにスロットにアセンブリラベルに至るまでカスタム属性(データを)バインディング、およびデータ(goodList)が縛ら。:データ= "goodList" )

スロットスコープ結合性の範囲を定義するタグのタグ(テンプレート)の内容の外部マイテンプレート、スロットの値

そして、スロットを通して。[スロットラベルバウンドカスタムプロパティ名データ]データ(slot.data)を得ました。

おすすめ

転載: www.cnblogs.com/chujunqiao/p/11807021.html