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

<templat