什么是插槽(slot):
将父组件传递的数据在子组件中显示出来。类似在子组件中预留了接口,接口中连接的内容由父组件来决定,弥补视图的不足(子组件的innerHTML部分父组件无法直接添加信息)
好处:
1. 使组件具有更好的扩展性
2. 更好对组件进行封装:抽取共性,将个性部分留给插槽
插槽的分类:
(1)匿名插槽(默认插槽):一个组件有且只有一个默认插槽(default)
//子组件中的使用:
<slot></slot>定义插槽
//父组件中的使用:
<子组件名>
<template v-slot:default>
插入的元素
</template>
</子组件名>
(2)具名插槽:有名称的插槽,给<slot>标签添加name属性,指定插槽名称。父组件在使用时可以将相关的内容插在指定的插槽上。
注:(#插槽名)
<template #left></template>
(3)作用域插槽(重点):又称为带参数的插槽,子组件向父组件传递参数,且该参数只能在插槽中使用,父组件接收到子组件的数据后可以按不同的方式展示出来。
子组件在父组件中显示时,页面结构会发生改变,但是数据来源于子组件。
//Son.vue
<template>
<div>
<h2>我是子组件</h2>
<slot name="sp" :lang="langList"></slot>
<slot name="cz" :lang="langList"></slot>
</div>
</template>
<script>
export default{
name: 'Son',
data(){
return {
langList:['大雁塔','兵马俑','乾陵','茂陵','华山']
}
}
}
</script>
//父组件:Test.vue
<template>
<div>
<Son>
<template v-slot:sp="slotProps"> <!-- slotProps:表示当前数据的来源--- 来自插槽所在的子组件 -->
{{ slotProps.lang.join('--') }}
</template>
</Son>
<br><br>
<Son>
<template v-slot:cz="slotProps"> <!-- slotProps:表示当前数据的来源--- 来自插槽所在的子组件 -->
<ul>
<li v-for="(item,index) in slotProps.lang" :key="index">
{{ item }}
</li>
</ul>
</template>
</Son>
</div>
</template>
结果展示: