1. 基本的な使い方:
サブアセンブリ:
子コンポーネントで <slot></slot> を使用して値の場所を残すと、親コンポーネントの値を取得できます
<テンプレート>
<div>
<strong>エラー:</strong>
<スロット></スロット>
</div>
</テンプレート>
<スクリプト>
デフォルトのエクスポート {
名前：「soltOne」
}
</script>
<スタイル>
</style>
親コンポーネント:
<solt-one>バグが発生しました</solt-one>
2. ドメイン名スロットの基本的な使い方
サブアセンブリ:
ヘッダー、コンテンツ、テールの 3 つの領域に単純に分割されます
頭と尾の両方の <slot></slot> に名前を付けてドメイン名を取得します
<テンプレート>
<div>
<ヘッダー>
<slot name="header" ></slot>
</header>
<メイン>
<スロット></スロット>
</メイン>
<フッター>
<slot name="footer" ></slot>
</フッター>
</div>
</テンプレート>
<スクリプト>
デフォルトのエクスポート {
名前：「soltTwo」
}
</script>
<スタイル>
</style>
親コンポーネント:
このコンテンツの下で、p タグがサブコンポーネントの名前に対応していれば、目的の場所に値を割り当てることができます。
名前のないものは、サブコンポーネントの名前のない位置に割り当てられます。
<ソルトツー>
<p slot="header">ヘッド情報</p>
<p>メインコンテンツ1</p>
<p>メインコンテンツ2</p>
<p slot="footer">フット情報</p>
</ソルトツー>
別の種類の親コンポーネントがあり、ドメイン名を通じてスロットを実現し、v-slot: を使用して子コンポーネントのドメイン名を取得し、割り当てを指定して、複数のコンテンツを追加することもできます。これは、以前の方法よりも完璧です。
<ソルトツー>
<template v-slot:header >
<p>ヘッダー 1</p>
<p>ヘッド情報 2</p>
</テンプレート>
<p>メインコンテンツ1</p>
<p>メインコンテンツ2</p>
<template v-slot:footer >
<p>テールメッセージ 1</p>
<p>テールメッセージ 2</p>
</テンプレート>
</ソルトツー>
知らせ：
ここでの順序は、サブコンポーネントの順序に基づいています。親コンポーネントはドメイン名の位置に従います。または、サブコンポーネントのドメイン名に従って表示されます。
親コンポーネントで内容が変わる
<ソルトツー>
<テンプレート v-スロット:フッター>
<p>ヘッダー 1</p>
<p>ヘッド情報 2</p>
</テンプレート>
<p>メインコンテンツ1</p>
<p>メインコンテンツ2</p>
<テンプレート v-スロット:ヘッダー>
<p>テールメッセージ 1</p>
<p>テールメッセージ 2</p>
</テンプレート>
</ソルトツー>
スロットを介してサブコンポーネントからコンテンツを取得する 3 つの方法
サブアセンブリ:
ここで、サブコンポーネントの値は v-bind にする必要があることに注意してください。
<テンプレート>
<div>
<スロット:息子="リスト">
</スロット>
</div>
</テンプレート>
<スクリプト>
デフォルトのエクスポート {
名前:'soltThree',
データ（）{
戻る{
リスト:[1,2,3,4,5,6,7,8,9]
}
}
}
</script>
<スタイル>
</style>
親コンポーネント:
一度に 4 つのタイプが提供され、サブコンポーネントの値は v-for を使用してトラバースできます. ここで、list1 はそれ自体で作成された新しい名前であり、son はサブコンポーネントにバインドされています. スロット スコープ メソッドは徐々に削除されました. #default この方法はより推奨されます。非常にシンプルで覚えやすいように見えます。
最初：
<ソルトスリー>
<template v-slot="list1">
<div>{ {list1. 息子}}</div>
</テンプレート>
</solt-3>
2 番目のタイプ:
<ソルトスリー>
<template v-slot:default ="list1">
<div>{ {list1.son}}</div>
</テンプレート>
</solt-3>
3 番目のタイプ:
<ソルトスリー>
<template #default ="list1">
<ul>
<li v-for ="(item,index) in list1.son" :key="index">{ {item}}</li>
</ul>
</テンプレート>
</solt-3>
4 番目のタイプ:
<ソルトスリー>
<template slot-scope="list1">
<div>{ {list1.son}}</div>
</テンプレート>
</solt-3>