コンポーネントとは何ですか？
コンポーネントは、vue.jsの最も強力な機能の1つです。コンポーネントは、HTML要素を拡張し、再利用可能なコードをカプセル化できます。より高いレベルでは、コンポーネントはカスタム要素であり、Vue.jsのコンパイラは特別な機能を追加します。場合によっては、コンポーネントは、IS機能とともに拡張されたネイティブHTML要素の形式でもあります。
スロット配布コンテンツ
①概要：
簡単に言えば、親コンポーネントが子コンポーネントにいくつかのDOMを配置する必要がある場合、これらのDOMは表示されず、表示されていない場所、表示方法、およびスロット分布の責任です。
defaualデフォルトで
子コンポーネント内に囲まれた親コンポーネントの内容は表示されません。
たとえば、コード：
<div id = "app"> <children> <span> 12345 </span> <！ - 上記の行は表示されません - > </children> </div> </div> <script> var vm = new vue（{el： '＃app'、コンポーネント：{//これには返品値がありません。 }}}）; </script>ディスプレイコンテンツはボタンボタンであり、スパンタグにコンテンツが含まれていません。
Singleスロット
簡単に言えば、このタグのみを使用する場合は、子コンポーネントを子コンポーネントのコンテンツに配置し、表示したい場所に配置できます。
<div id = "app"> <children> <span> 12345 </span> <！ - 上記の行は表示されません - > </children> </div> <script> var vm = new vue（{el： '＃app'、コンポーネント：{//これには返品値がありません。アクション、ボタンタグ</button> "}}}）; </script>たとえば、これを書く場合、結果は次のとおりです。
<ボタン> <Span> 12345 </span>アクションの範囲を明確にするには、ボタンタグを使用</button>
つまり、子コンポーネントに配置された親コンポーネントの内容は、子コンポーネントの<slot> </slot>位置に挿入されます。
複数のタグがある場合でも、それらが一緒に挿入されることに注意してください。これは、<slot> </slot>タグを子コンポーネントに配置されたタグに置き換えることに相当することに注意してください。
slotという名前のスロット
さまざまな場所のサブコンポーネントに配置されたさまざまなHTMLタグを配置します
親コンポーネントは、分散するタグにスロット=” name”属性を追加します
子コンポーネントは、対応する配布場所のスロットタグにname =“ name name”属性を追加し、対応する場所に対応するタグを配置します。
サンプルコード：
<div id = "app"> <children> <span slot = "first"> 12345 </span> <span slot = "second"> 56789 </span> <！ - 上記の行は表示されません - > </children> </div> <スクリプト>分散： "<button> <slot name = 'first'> </slot>アクションの範囲を明確にするために、<スロット名= 'second'> </slot>ボタンタグ</button>"}}}）; </script>
結果は次のように表示されます：（視聴の便利さのために、ラインブレイクが手動で調整されました）
<ボタン> <スパンスロット= "first"> 12345 </span>アクションの範囲を明確にするには、<スパンスロット= "second"> 56789 </span>ボタンタグを使用します</button>
分布コンテンツのスコープ：
分散コンテンツの範囲は、それが配置されているテンプレートに基づいて決定されます。たとえば、上記のタグは親コンポーネントのテンプレートによって制御されます（子コンポーネントの子タグに含まれていますが、子コンポーネントのテンプレート属性にはないため、子コンポーネントに属していません）、親コンポーネントによって制御されます。
サンプルコード：
<div id = "app"> <children> <span slot = "first" @click = "tobeknow"> 12345 </span> <span slot = "second"> 56789 </span> <！ - 上記の行は表示されません - > </children親の方法 "）;}}、コンポーネント：{children：{//これには返品値がなく、テンプレートは引き続き配布されません：" <button> <slot name = 'first'> </slot>アクションの範囲を明確にするために、<スロット名= 'セカンド'> </スロット> </script>テキスト12345の領域が（すべてのボタンではなく）クリックされると、親コンポーネントのtobeKnowメソッドがトリガーされます。
しかし、他の領域をクリックすると、効果はありません。
公式のチュートリアルはこれを言っています：
親コンポーネントテンプレートのコンテンツは、親コンポーネントの範囲内にコンパイルされます。子コンポーネントテンプレートの内容は、子コンポーネントの範囲内にコンパイルされます
contents分散がない場合のヒント：
親コンポーネントが子コンポーネントにタグを配置しない場合、または親コンポーネントが子コンポーネントにタグを配置するが、スロット属性があり、子コンポーネントにはスロット属性のタグがありません。
次に、子コンポーネントのスロットタグは役割を果たさないでしょう。
スロットタグにコンテンツがない場合を除き、コンテンツが分散されていないときにスロットタグのコンテンツが表示されます。
例のコードのように：
<div id = "app"> <children> <span slot = "first">【12345 name = 'first'> <button> contentコンテンツがない場合、アクションの範囲を明確にするために1】</button> </slot> <slot name = 'last'> <butth> contentが表示されない場合は、2が表示されない場合は、2が表示されます。 </script>
説明：
【1 name name = 'first'のスロットタグは、親コンポーネントに対応するタグに置き換えられます（スロットタグ内のコンテンツは破棄されます）。
【2】name = 'last'のスロットタグ。対応するコンテンツがないため、スロットタグ内のコンテンツが表示されます。
subcomponentのルートタグのプロパティを制御する場合
[1]まず、テンプレートタグは親コンポーネントに属しているため、子コンポーネントの指示をテンプレートタグにバインドすることはできません（親コンポーネントに属しているため）。
[2]親コンポーネントを介して子コンポーネントが表示されているかどうか（v-ifやv-showなど）を制御する必要がある場合、この指令は明らかに親コンポーネント（親コンポーネントのデータの下に配置されたなど）に属します。タグは、子コンポーネントのテンプレートに記述できます。
コードとして：
<div id = "app"> <button @click = "toshow">子どものコンポーネントが表示されるように</button> <children v-if = "abc"> </children> </div> <script> var vm = new vue（{el： '＃app'、data：{abc：fals}、methods：{toshow：unction how：{this.bc =！ {//これには返品値がありません、テンプレート： "<div>これは子コンポーネント</div>"}}}）; </script>説明：
子コンポーネントが親コンポーネントを介して表示されるかどうかを制御します（ボタンをクリックしてV-IF命令の値を切り替えます）。
[3]子コンポーネントが表示されているかどうかを制御する必要がある場合（たとえば、非表示）、この命令は明らかに子コンポーネントに属します（値は子コンポーネントのデータ属性の下に配置されます）。
<div id = "app"> <button @click = "toshow">子どものコンポーネントが表示されるように</button> <children> <span slot = "first">【12345これ。$ children [0] .tohidden = true; true;}、コンポーネント：{//これは返品値がありません。 this.tohidden =！this.tohidden; </script>説明：
子コンポーネントをクリックすると、子コンポーネントが消えます。
親コンポーネントのボタンをクリックして、子コンポーネントの高度なプロパティを変更して、子コンポーネントを再表示します。
子コンポーネントの指示は、子コンポーネントのテンプレートにバインドされています（これは呼び出すことができます）。
上記は、編集者が導入した11番目のVuejsコンポーネントのスロットコンテンツ配布の例の詳細な説明です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！