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> 语法糖来创建和使用自定义组件的插槽。具体包括：

1. 默认插槽：通过 <slot></slot> 定义，默认内容可以直接放置在组件标签内。
2. 具名插槽：通过 <slot name="xxx"></slot> 定义，使用 #xxx 或 v-slot:xxx 来指定内容。
3. 作用域插槽：通过 <slot name="xxx" :item="item"></slot> 定义，父组件可以通过解构参数来访问传递的数据。

希望这些示例能帮助你更好地理解和使用 UniApp 和 Vue 3 的插槽功能。