插槽(slot):是vue为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的,希望由【用户指定】的部分定义为【插槽】
插槽分为3类:默认插槽,具名插槽,作用域插槽
1.声明插槽,
每个插槽都有name属性,默认为default
<template>
<div class="left-container">
<!-- 当用户没有指定插槽是默认内容是slot标签里的内容 -->
<slot name="default">这是default插槽默认的内容</slot>
</div>
</template>
2.v-slot指令:
将内容渲染到指定插槽中
<template>
<div class="app-container">
<div class="box">
<!-- 默认情况下,在使用组件的时候,提供的内容都会被填充到名字为default的插槽中 -->
<!-- 1.如果要把内容填充到指定的名称的插槽中,需要v-slot:这个指令 -->
<!-- 2.v-slot:要跟上插槽的名称 -->
<!-- 3.v-slot:指令不能用在元素身上,只能用在template上 -->
<!-- 4.template这个标签是一个虚拟的标签,只起到包裹的作用,但不会被渲染成实质性的html元素-->
<!-- 5.v-slot: 简写为# -->
<template v-slot:default>
<p>这是Left组件的内容区域,声明p标签</p>
</template>
</div>
</div>
</template>
3.具名插槽
在同一个组件中,我们有时需要多个插槽作为预留区域,此时,应该给每一个插槽取一个不同的name名称
如:定义了student组件,并设置了多个插槽。
<template>
<div>
<!-- 名字 -->
<div class="username">
<slot></slot>
</div>
<!-- 性别 -->
<div class="sex">
<slot></slot>
</div>
<!-- 年龄 -->
<div class="age">
<slot></slot>
</div>
</div>
</template>
<template>
<div class="box">
<student>
<h3>xxxx</h3>
</student>
</div>
</template>
其中三个插槽名相同为default,在中写入的内容会同时渲染到名称相同的插槽,如果给插槽给上相应的name属性,就会避免这种情况
4.作用域插槽
<template>
<div class="right-container">
<h3>student 组件</h3>
<div class="content-box">
<!-- 在封装组件时,为预留的<slot>提供属性对应的值,这种用法叫做"作用域插槽" -->
<slot name="content" msg="刘兰健"></slot>
</div>
</div>
</template>
<!-- 在上块代码中,设置了msg="刘兰健",我们此时需要在插槽内容区内拿到该数据: -->
<!-- 插槽内容部分 -->
<student>
<template v-slot.content="obj">
<div>
<p>{{ obj.msg }}</p>
</div>
</template>
</student>
<!-- 这里的msg就能获取到成功渲染 -->
5.插槽传值
- 在child2中
<template>
<div>
<ul>
<!-- 插槽传值 -->
<slot :msg="newGames"></slot>
</ul>
</div>
</template>
<script>
export default {
name:"child2",
data() {
return {
newGames: ["天天酷跑", "PUBG", "LOL"],
}
},
}
-
在child1中
<child2> <!-- 插槽数据接收, 只能在模板标签上接收 --> <template slot-scope="newGames"> <ul> <li v-for="item in newGames.msg" :key="item.index">{{item}}</li> </ul> </template> </child2>
这样就能把child2中的值传给child1,然后在将获取到的值渲染到列表中