什么是插槽?
在 UniApp 中,插槽(Slot)是一种允许父组件向子组件特定位置插入HTML内容的方式。这种方式使得组件更加灵活,可以被复用在多种场景下,同时让父组件能够控制子组件的部分呈现内容。
基本概念
-
默认插槽 :当没有特别指定插槽名称时,默认插槽就是指没有名字的插槽,可以在子组件中直接使用
<slot></slot>
标签来定义一个默认插槽的位置。 -
命名插槽 :如果需要在子组件中定义多个插槽,可以通过
<slot name="slotName"></slot>
来定义具有特定名称的插槽。父组件则需要使用<template v-slot:slotName>...</template>
或者更简洁的<template #slotName>...</template>
来填充这些具名插槽。 -
作用域插槽 :有时候父组件需要访问子组件的数据或属性,这时候就需要使用作用域插槽。子组件需要在
<slot>
标签中声明需要传递给父组件的数据,如<slot name="slotName" :items="items"></slot>
。父组件在使用这个插槽时,可以通过v-slot:slotName="{ items }"
来接收这些数据,并根据这些数据进行渲染。
默认插槽
html
<template>
<view class="all">
<view class="header">
头部
</view>
<view class="main">
<slot></slot>
</view>
<view class="footer">
底部
</view>
</view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.header {
position: sticky;
top: 0;
background-color: green;
height: 100px;
z-index: 1; // 确保头部始终在最上层
}
.main {
height: 100px;
}
.footer {
background-color: rosybrown;
height: 120px;
}
</style>