1. スロットとは何ですか?
これをプレースホルダーとして使用すると、親コンポーネントはプレースホルダーの位置に<slot>それを表示できるため、コンポーネントの使用が向上します。传递的内容灵活性
2. スロットの内容
親コンポーネントは一部を子コンポーネントに渡し模板片段、子コンポーネントがコンポーネント内でそれらのフラグメントをレンダリングできるようにします。
例：
<!-- 父组件 -->
<FancyButton>
<!-- 插槽内容 -->
click me
</FancyButton>
<!-- 子组件 -->
<button class="fancy-btn">
<!-- 插槽出口 -->
<slot></slot>
</button>
レンダリング結果:
<button class="fancy-btn">Click me!</button>
説明: この要素は、親コンポーネントによって提供される要素が表示される場所を示す<slot>要素です。插槽出口 (slot outlet)插槽内容 (slot content)
回路図:
3. レンダリング範囲
スロットのコンテンツ父组件的数据作用域自体が定義されているため、スロットのコンテンツにアクセスできます父组件模板中。
例：
<!-- message 是父组件的数据 -->
<FancyButton>{
{ message }}</FancyButton>
説明:親コンポーネント・テンプレート内の式のみにアクセスでき父组件的作用域、子コンポーネント・テンプレート内の式のみにアクセスできます子组件的作用域。
4. デフォルトのコンテンツ
外部から何も提供されない場合、スロットにデフォルトのコンテンツを指定できます。
例：
<!-- 父组件 -->
<SubmitButton />
<!-- 子组件 -->
<button type="submit">
<slot>
<!-- 默认内容 -->
Submit
</slot>
</button>
レンダリング結果:
<button type="submit">Submit</button>
5. 名前付きスロット
<slot>attribute name要素には、各スロットに特別な要素を割り当てて唯一的 ID、各場所でどのコンテンツをレンダリングするかを決定できます。
例：
<!-- 子组件 -->
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
<!-- 父组件 -->
<BaseLayout>
<template #header>
<h1>Here might be a page title</h1>
</template>
<template #default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template #footer>
<p>Here's some contact info</p>
</template>
</BaseLayout>
説明:このタイプnameのスロットは と呼ばれます具名插槽 (named slots)。暗黙的に という名前が付けられ没有提供 nameます。対応する略語があるため、「テンプレート フラグメントのこの部分をサブコンポーネントに渡す」ことを意味する と省略できます。<slot> 出口“default”v-slot#<template v-slot:header><template #header>header 插槽中
回路図:
6. スコープスロット
親コンポーネントによって設定されたスロットの内容には、子コンポーネント ドメインのデータが必要です。これを行うには、レンダリング時に子コンポーネントにそのデータの一部をスロットに提供させる必要があります。
例：
<!-- 子组件 -->
<div>
<slot :text="greetingMessage" :count="1"></slot>
</div>
<!-- 父组件 -->
<MyComponent v-slot="slotProps">
{
{ slotProps.text }} {
{ slotProps.count }}
</MyComponent>
説明:propsディレクティブの値としてスロットに渡されたサブコンポーネントは、v-slotスロット内の式でアクセスできます。
回路図:
