<template>
<view class="wrapper">
<demo :list="list">
<template #before> before </template>
<template #key1> 11111111111111 </template>
<template #after> after </template>
</demo>
</view>
</template>
<script setup lang="ts">
import demo from '@/compontents/demo.vue';
import { ref } from 'vue';
const list = ref([
{
key: 'key1',
value: 'value1',
},
{
key: 'key2',
value: 'value2',
},
{
key: 'key3',
value: 'value3',
},
{
key: 'key4',
value: 'value4',
},
{
key: 'key5',
value: 'value5',
},
]);
</script>
<style scoped>
.wrapper {
padding: 200rpx;
font-size: 32rpx;
}
</style>
<template>
<view v-for="(item, index) in list" :key="index">
<slot name="before">slot:before </slot>
<slot :name="item.key">slot:{{ item.key }}</slot>
<slot name="after">slot:after </slot>
</view>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
export default defineComponent({
props: {
list: {
type: Array as PropType<any[]>,
default: () => [],
},
},
setup() {
return {};
},
});
</script>
<style scoped></style>