最近被新来的同事问起vue的插槽(slot)的问题,想了一下,感觉平时开发中slot使用频率并不是很高。所以结合了一个实例代码,整理了下插槽(slot)的用法。
Vue官网文档上是这么描述的:
将 slot 元素作为承载分发内容的出口。
在我个人理解:slot既然叫插槽,可以理解为占位内嵌的地方,具体到代码中就是组件内可以添加内容的一个空间。
1. 匿名插槽
// 组件(父)
<Card>
<p>hello,world</p>
</Card>
// 组件内部(子)
<div class="cardItem">
<h1>子页面</h1>
<slot></slot> // 注意:此处替换为了 <p>hello,world!</p>
</div>
渲染结果:
2. 具名插槽
带name属性具体名字的插槽,假如需要在组件内部预留多个插槽位置,就需要为插槽定义名字,指定插入的位置。
// 子页面
<div class="cardItem">
<h1>子页面</h1>
<!-- 具名插槽 name需与要插入的地方v-slot:name对应 -->
<slot name="header"></slot>
<!-- name不写默认为default 会带出剩余其他的内容 -->
<slot></slot>
<slot name="footer"></slot>
</div>
// 父页面
<Card :myName="myName">
<!-- 具名插槽的内容必须使用模板<template></template>包裹 -->
<template v-slot:header>
<p>头部</p>
</template>
<!-- v-slot: 可以缩写成(#)语法糖 -->
<template #footer>
<p>脚步</p>
</template>
<p>身体</p>
</Card>
渲染结果:
3. 插槽传值
父传子 :与父子组件传值一样,不细说举例了
子传父:
// 子页面
<template>
<div class="cardItem">
<h1>子页面</h1>
<slot name="content" :cardList="cardList"></slot>
</div>
</template>
export default {
data() {
return {
cardList: [
{
content: "我是子页面传递的数据1",
id: 1
},
{
content: "我是子页面传递的数据2",
id: 2
},
{
content: "我是子页面传递的数据3",
id: 3
}
]
};
}
};
// 父页面
<Card>
<!-- 此处为es6 {}解构,{cardList}等同于ctx.cardList, ctx(作用域上下文对象) -->
<template #content="{cardList}">
<ul>
<li v-for="item in cardList" :key="item.id">
{{ item.content }}
</li>
</ul>
</template>
</Card>
渲染结果: