- 要在子组件中提供一个插槽 占一个位置
<slot></slot>
子组件代码
<template>
<div class="slotSub">
<br>
<hr>
<strong>ERROR</strong>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'SlotSub',
}
</script>
<style scoped>
</style>
- 父组件代码
<!-- BrotherCard.vue -->
<template>
<div class="slotFa">
<slot-sub>有BUG</slot-sub>
<slot-sub>有一个警告</slot-sub>
</div>
</template>
<script>
import SlotSub from './SlotSub.vue'
export default {
name: 'SlotFa',
components:{
SlotSub
}
}
</script>
效果
如果子组件中定义的slot之间有内容 ,当父组件中传递的有参数则覆盖
无参数则显示插槽之间的内容
当父组件模板变为
<div class="slotFa">
<slot-sub>有BUG</slot-sub>
<slot-sub>有一个警告</slot-sub>
<slot-sub></slot-sub>
</div>
子组件变为
<div class="slotSub">
<br>
<hr>
<strong>ERROR</strong>
<slot>默认内容</slot>
<slot></slot>
</div>
效果图为
具名插槽
父组件代码
<!-- 具名插槽 -->
<div>
<slot-sub-by-name>
<p slot="header">标题信息</p>
<p>主要内容1</p>
<p>主要内容2</p>
<p slot="footer">尾部信息</p>
</slot-sub-by-name>
<slot-sub-by-name >
//template可以包含多个标签,而且自身不会显示
<template slot="header">
<p>标题1</p>
<p>标题2</p>
</template>
<template slot="footer">
<p>尾部1</p>
<p>尾部2</p>
</template>
<template>
<p>1234</p>
<p>12342</p>
</template>
</slot-sub-by-name>
</div>
子组件代码
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
作用域插槽
父组件代码
<template>
<div>
<slot-sub-by-name :list='list'>
<template slot-scope="slotProps">
<strong v-if="slotProps.info.id==2" class="current" > {{slotProps.info.name}}</strong>
<span v-else> {{slotProps.info.name}}</span>
</template>
</slot-sub-by-name>
</div>
</template>
data(){
return{
list:[{
id:1,
name: 'apple'
},
{
id:2,
name: 'orange'
},
{
id:3,
name: 'banana'
}]
}
<style scoped>
.current{
font-size: 30px;
color: chartreuse;
}
</style>
子组件
<template>
<div class="slotSubByName">
<ul>
<li :key='item.id' v-for='item in list'>
<slot :info='item'>{{item.name}}</slot>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'SlotSubByName',
props:['list']
}
</script>
<style scoped>
</style>
**子组件通过slot标签 把item 绑定到 info
父组件通过 template 标签的slot-scope=“slotProps” 获取到info 进而可以得到item对象 即可通过判断找对对应item
**
总结
一般插槽
子类没有内容则直接显示父类内容,如果有内容则覆盖
具名插槽
父组件通过slot=“xxx” 绑定子组件
父组件还可以通过包含多组内容
通过name属性
作用域插槽
在父组件通过 template 标签的slot-scope 属性值slotProps(一般都是这个命名,也可以自定义)绑定info找到item 然后可以获取到对应的id name