フロントエンド技術コミュニティ総合ディレクトリ（購読前にこのブログをご確認ください）
効果例
デフォルトスロット（匿名スロット）
スロットは通常、2 つの親コンポーネントと子コンポーネントの間で使用されます。最も一般的な用途は、一部の UI コンポーネント ライブラリでポップアップ コンポーネントを使用する場合です。ポップアップ コンポーネントのコンテンツはカスタマイズできます。これがスロットの使用です。原理。
(1) スロットは Vue の組み込みタグです。
(2) スロットはサブコンポーネント用のスロットを掘ることに相当し、コンテンツを埋めるために使用できます。
(3) 親コンポーネント内でサブコンポーネントを呼び出す場合、サブコンポーネントタグ間のコンテンツ要素が配置されるコンテンツとなり、スロットタグが置き換えられます。
注:
(1) スロット タグ内のコンテンツはデフォルトのコンテンツです。つまり、親コンポーネントがコンテンツを子コンポーネントに渡さない場合、子コンポーネントはデフォルトでスロット内のコンテンツをレンダリングしますが、スロット タグはレンダリングされません。
(2) スロットのコンテンツは親コンポーネントのデータ スコープにアクセスできます。
(3) スロットのコンテンツは子コンポーネントのデータにアクセスできません。
親コンポーネントのコード