父组件 start =====================================================
<script setup>
import { ref, watch, computed, watchEffect, onMounted, onUnmounted, toValue } from "vue";
import TestSub from "./components/test-sub.vue";
defineOptions({
name: "Test",
});
const props = defineProps({});
const options = ref([
{
label: "选项1",
prop: "slot1",
},
{
label: "选项2",
prop: "slot2",
},
{
label: "选项3",
prop: "slot3",
},
]);
</script>
<template>
<view class="test">
<view class="">测试环境</view>
<TestSub :options="options">
<!-- <template v-slot:default> </template> -->
<template v-slot:slot1>
<view>slot1插槽内容</view>
</template>
<template v-slot:slot2>
<view>slot2插槽内容</view>
</template>
<template v-slot:slot3>
<view>slot3插槽内容</view>
</template>
</TestSub>
</view>
</template>
<style lang="scss">
.test {
}
</style>
父组件 end =====================================================
子组件 start =====================================================
<script setup>
import { ref, watch, computed, watchEffect, onMounted, onUnmounted, toValue } from "vue";
defineOptions({
name: "TestSub",
});
const props = defineProps({
options: {
type: [Array, Object],
default: () => [],
},
});
</script>
<template>
<view class="test-sub">
<view>子组件</view>
<template v-for="(item, index) in options" :key="index">
<view class="">
<slot :name="item.prop">
{{ item.prop }}
</slot>
</view>
</template>
</view>
</template>
<style lang="scss">
.test-sub {
}
</style>
子组件 end =====================================================