UniApp在Vue3的setup语法糖下自定义组件插槽详解
UniApp在 Vue3的 setup 语法糖下自定义组件插槽详解
UniApp 是一个基于 Vue.js 的跨平台开发框架，可以用来开发微信小程序、H5、App 等多种平台的应用。Vue 3 引入了 <script setup> 语法糖，使得组件的编写更加简洁和直观。本文将详细介绍如何在 UniApp 中使用 Vue 3 的 <script setup> 语法糖来创建自定义组件，并展示如何使用默认插槽、具名插槽和作用域插槽。
1. 默认插槽
默认插槽是最简单的插槽形式，它允许你在组件内部定义一个可替换的内容区域。父组件可以通过直接放置内容来填充这个插槽。
示例：自定义组件 MyComponent.vue
<template>
<view class="my-component">
<!-- 默认插槽 -->
<slot></slot>
</view>
</template>
<script setup>
// 这里可以定义组件的逻辑
</script>
<style scoped>
.my-component {
border: 1px solid #ccc;
padding: 20rpx;
margin: 20rpx;
background-color: #f9f9f9;
}
</style>
使用自定义组件 App.vue
<template>
<view class="app">
<MyComponent>
<text>这是默认插槽的内容</text>
</MyComponent>
</view>
</template>
<script setup>
import MyComponent from './components/MyComponent.vue';
</script>
<style>
.app {
padding: 20rpx;
background-color: #fff;
}
</style>
2. 具名插槽
具名插槽允许你在组件内部定义多个插槽，并通过名称来区分它们。父组件可以通过 v-slot 指令来指定内容应该填充到哪个插槽。
示例：自定义组件 MyComponent.vue
<template>
<view class="my-component">
<!-- 默认插槽 -->
<slot></slot>
<!-- 具名插槽 -->
<view class="header">
<slot name="header">
<text>默认头部内容</text>
</slot>
</view>
<view class="footer">
<slot name="footer">
<text>默认底部内容</text>
</slot>
</view>
</view>
</template>
<script setup>
// 这里可以定义组件的逻辑
</script>
<style scoped>
.my-component {
border: 1px solid #ccc;
padding: 20rpx;
margin: 20rpx;
background-color: #f9f9f9;
}
.header, .footer {
margin: 10rpx 0;
padding: 10rpx;
border: 1px dashed #ccc;
}
</style>
使用自定义组件 App.vue
<template>
<view class="app">
<MyComponent>
<!-- 默认插槽内容 -->
<text>这是默认插槽的内容</text>
<!-- 具名插槽内容 -->
<template #header>
<text>这是头部插槽的内容</text>
</template>
<template #footer>
<text>这是底部插槽的内容</text>
</template>
</MyComponent>
</view>
</template>
<script setup>
import MyComponent from './components/MyComponent.vue';
</script>
<style>
.app {
padding: 20rpx;
background-color: #fff;
}
</style>
3. 作用域插槽
作用域插槽允许你在组件内部传递数据给父组件，父组件可以使用这些数据来生成插槽内容。
示例：自定义组件 MyComponent.vue
<template>
<view class="my-component">
<!-- 默认插槽 -->
<slot></slot>
<!-- 具名插槽 -->
<view class="header">
<slot name="header">
<text>默认头部内容</text>
</slot>
</view>
<!-- 作用域插槽 -->
<view class="content">
<slot name="content" :item="item">
<text>默认内容：{{ item.text }}</text>
</slot>
</view>
<view class="footer">
<slot name="footer">
<text>默认底部内容</text>
</slot>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
const item = ref({
text: '这是作用域插槽的默认内容'
});
</script>
<style scoped>
.my-component {
border: 1px solid #ccc;
padding: 20rpx;
margin: 20rpx;
background-color: #f9f9f9;
}
.header, .content, .footer {
margin: 10rpx 0;
padding: 10rpx;
border: 1px dashed #ccc;
}
</style>
使用自定义组件 App.vue
<template>
<view class="app">
<MyComponent>
<!-- 默认插槽内容 -->
<text>这是默认插槽的内容</text>
<!-- 具名插槽内容 -->
<template #header>
<text>这是头部插槽的内容</text>
</template>
<!-- 作用域插槽内容 -->
<template #content="{ item }">
<text>这是作用域插槽的内容：{{ item.text }}</text>
</template>
<!-- 另一个具名插槽内容 -->
<template #footer>
<text>这是底部插槽的内容</text>
</template>
</MyComponent>
</view>
</template>
<script setup>
import MyComponent from './components/MyComponent.vue';
</script>
<style>
.app {
padding: 20rpx;
background-color: #fff;
}
</style>
总结
通过上述示例，我们详细介绍了如何在 UniApp 中使用 Vue 3 的 <script setup> 语法糖来创建和使用自定义组件的插槽。具体包括：
- 默认插槽：通过
<slot></slot>定义，默认内容可以直接放置在组件标签内。 - 具名插槽：通过
<slot name="xxx"></slot>定义，使用#xxx或v-slot:xxx来指定内容。 - 作用域插槽：通过
<slot name="xxx" :item="item"></slot>定义，父组件可以通过解构参数来访问传递的数据。
希望这些示例能帮助你更好地理解和使用 UniApp 和 Vue 3 的插槽功能。