vue コンポーネントでのスロット ソケットの使用方法の詳細な説明

デフォルト値

要素に設定された値は、コンテンツの配布方法を構成するために特別な attribute 名を使用して構成できます。複数のスロットには異なる名前を付けることができます。名前付きスロットは、コンテンツ フラグメント内の対応するスロット属性を持つ要素と一致します

var childNode = {
 template: `
 <p class="child">
 <p>子组件</p>
 <slot name="my-header">头部默认值</slot>
 <slot name="my-body">主体默认值</slot>
 <slot name="my-footer">尾部默认值</slot>
 </p>
 `,
};
var parentNode = {
 template: `
 <p class="parent">
 <p>父组件</p>
 <child>
 <p slot="my-header">我是头部</p>
 <p slot="my-footer">我是尾部</p>
 </child>
 </p>
 `,
 components: {
 'child': childNode
 },
};

匿名スロットを使用することもできます。これはデフォルトのスロットであり、一致するコンテンツ フラグメントが見つからない場合のフォールバック スロットとして機能します。匿名スロットは、スロット属性のない要素のスロットとしてのみ使用できます。スロットが設定されていない場合、スロット属性を持つ要素は破棄されます

var childNode = {
 template: `
 <p class="child">
 <p>子组件</p>
 <slot name="my-body">主体默认值</slot>
 <slot></slot>
 </p>
 `,
};
var parentNode = {
 template: `
 <p class="parent">
 <p>父组件</p>
 <child>
 <p slot="my-body">我是主体</p>
 <p>我是其他内容</p>
 <p slot="my-footer">我是尾部</p>
 </child>
 </p>
 `,
 components: {
 'child': childNode
 },
};
<p slot="my-body">插入<slot name="my-body">中，<p>我是其他内容</p>插入<slot>中，而<p slot="my-footer">被丢弃

var childNode = {
 template: `
 <p class="child">
 <p>子组件</p>
 <slot name="my-body">主体默认值</slot>
 </p>
 `,
};
var parentNode = {
 template: `
 <p class="parent">
 <p>父组件</p>
 <child>
 <p slot="my-body">我是主体</p>
 <p>我是其他内容</p>
 <p slot="my-footer">我是尾部</p>
 </child>
 </p>
 `,
 components: {
 'child': childNode
 },
};
<p>我是其他内容</p>和<p slot="my-footer">都被抛弃

スコープ スロットは、レンダリングされた要素を再利用可能なテンプレート (データを渡すことができる) に置き換えるために使用される特別なタイプのスロットです。 コンポーネントにプロパティを渡すのと同じように、子コンポーネントではデータをスロットに渡すだけです

<span style="font-size: 16px"><p class="child">
 <slot text="hello from child"></slot>
</p></span>