再上一章节uni-app props传递说到了自定义模板如何传递script值,但是如果我们要传递其他的模板样式内容怎么办呢?vue提供了一个更加方便的组件,插槽slots
使用方法
1.在自定义组件里面要插入模板内容的地方写上<slot></slot>
<template>
<view class="body">
<view class="header">header头部区域</view>
<view class="main">
<slot></slot>
</view>
<view class="footer">footer尾部区域</view>
</view>
</template>
2.再我们的页面上引入这个自定义组件,然后再其中间插入想要插入的模板内容,并可以对其设置样式,注意:这个样式不是设置再自定义组件里面,而是设置再你的页面上
<template>
<view class="box">
<template-body>
<view class="main_box">插槽插入样式</view>
</template-body>
</view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.box{
.main_box{
width: 100%;
height: 120px;
background: pink;
}
}
</style>
页面效果![](https://i-blog.csdnimg.cn/direct/d3e6c2dde791430dbb2b886438eb49f7.png)
进阶用法
具名插槽
如果我们想要设置多个插槽那怎么区分插槽呢?
错误示例
自定义组件代码
<template>
<view class="body">
<view class="header">
<slot></slot>
</view>
<view class="main">
<slot></slot>
</view>
<view class="footer">
<slot></slot>
</view>
</view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.body {
.header {
width: 100%;
height: 100px;
background: gray;
}
.main {
width: 100%;
min-height: 150px;
}
.footer {
width: 100%;
height: 100px;
background: darkgray;
}
}
</style>
页面代码
<template>
<view class="box">
<template-body>
<view class="main_box">插槽插入样式</view>
</template-body>
</view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.box{
.main_box{
width: 100%;
height: 120px;
background: pink;
}
}
</style>
页面效果
可以看到,如果这样写的话,是无法区分,到底要插入到哪个槽
正确示例
我们为插槽设定一个名字,称为具名插槽
自定义组件代码
<template>
<view class="body">
<view class="header">
<slot name="header">header头部区域</slot>
</view>
<view class="main">
<slot name="main">main主体区域</slot>
</view>
<view class="footer">
<slot name="footer">footer尾部区域</slot>
</view>
</view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.body {
.header {
width: 100%;
height: 100px;
background: gray;
}
.main {
width: 100%;
min-height: 150px;
}
.footer {
width: 100%;
height: 100px;
background: darkgray;
}
}
</style>
页面上的代码
<template>
<view class="box">
<template-body>
<template v-slot:main>
<view class="main_box">插入的主体模板内容</view>
</template>
</template-body>
</view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.box{
.main_box{
width: 100%;
height: 120px;
background: pink;
}
}
</style>
我们通过为插槽设定了一个名字,然后再页面上用template容器来添加我们要插入的模板内容,并且可以设定一些特有的样式,v-solt:main也可以简写成#main
条件插槽
如果我们写了一个自定义组件中包含了很多东西的话,我在页面上使用这个组件的时候不想全部都要,怎么办呢?这个时候我们就要用我们的条件插槽了,用v-if来判断存在就出现,不存在就不出现
使用用法
自定义组件代码
<template>
<view class="body">
<view class="header" v-if="$slots.header">
<slot name="header">header头部区域</slot>
</view>
<view class="main" v-if="$slots.main">
<slot name="main">main主体区域</slot>
</view>
<view class="footer" v-if="$slots.footer">
<slot name="footer">footer尾部区域</slot>
</view>
</view>
</template>
当我们再页面上使用了这个自定义组件,但是没有为其指定名字的页面效果
<template>
<view class="box">
<template-body>
<view class="main_box">这是我们的主体条件插槽区域</view>
</template-body>
</view>
</template>
可以看到,我们的页面上虽然使用了这个自定义组件,但是没有为其指定名字,所以什么都没有出现
指定自定义组件名字
<template>
<view class="box">
<template-body #main>
<view class="main_box">这是我们的主体条件插槽区域</view>
</template-body>
</view>
</template>
页面效果