### Vue.js
Slot 插槽使用教程
#### 默认
插槽
默认
插槽是最
简单的形式，它允许父组件向子组件传递任意内容。当子组件中只有一个未命名的 `<
slot>` 标签时，默认
插槽会自动接收来自父组件的内容。
```html
<!
-- 子组件 ChildComponent.vue
-->
<template>
<div class="child">
<h2>这是子组件</h2>
<
slot></
slot>
</div>
</template>
<script>
export default {
name: 'ChildComponent'
}
</script>
```
```html
<!
-- 父组件 ParentComponent.vue
-->
<template>
<div class="parent">
<h1>这是父组件</h1>
<ChildComponent>
这里是通过默认
插槽传入的内容。
</ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent }
}
</script>
```
#### 具名
插槽
具名
插槽允许多个不同的位置插入内容。通过给 `<
slot>` 添加 `name` 属性，在父组件中可以指定具体哪个具名
插槽应该被填充。
```html
<!
-- 子组件 Named
SlotsExample.vue
-->
<template>
<div class="named
-slots
-example">
<header>
<
slot name="header"></
slot>
</header>
<main>
<
slot></
slot>
</main>
<footer>
<
slot name="footer">这里是备用内容。</
slot>
</footer>
</div>
</template>
```
```html
<!
-- 父组件 UsingNamed
Slots.vue
-->
<template>
<div class="using
-named
-slots">
<Named
SlotsExample>
<!
-- 向 header 名字的
slot 填充内容
-->
<template v
-slot:header>
<h1>这里是从父级传来的头部内容</h1>
</template>
<!
-- 默认
插槽内容
-->
<p>这是一些普通的段落文本。</p>
<!
-- 向 footer 名字的
slot 填充内容
-->
<template #footer>
<p>这里是从父级传来的底部内容</p>
</template>
</Named
SlotsExample>
</div>
</template>
<script>
import Named
SlotsExample from './Named
SlotsExample.vue';
export default {
components: { Named
SlotsExample },
};
</script>
```
#### 作用域
插槽
作用域
插槽让子组件能够将数据暴露给父组件
使用的模板片段内。这意味着可以在父组件中访问到子组件的数据并基于这些数据显示自定义内容。
```html
<!
-- 子组件 Scoped
SlotExample.vue
-->
<template>
<ul>
<li v
-for="(item, index) in items" :key="index">
<
slot :text="item.text">{{ item.text }}</
slot>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ text: "苹果" },
{ text: "香蕉" },
{ text: "橙子" }
]
};
}
}
</script>
```
```html
<!
-- 父组件 UseScoped
Slot.vue
-->
<template>
<div class="use
-scoped
-slot">
<Scoped
SlotExample v
-slot:default="{ text }">
{{ text }}
</Scoped
SlotExample>
</div>
</template>
<script>
import Scoped
SlotExample from "./Scoped
SlotExample";
export default {
components: { Scoped
SlotExample }
};
</script>
```
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
