当前位置：首页 > news >正文

UniApp在Vue3的setup语法糖下自定义组件插槽详解

news 2025/6/30 7:26:36

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>