A文件
<script setup>
import Parent from './Parent.vue'
</script>
<template>
<view class="box">
<view>使用插槽默认值</view>
<Parent />
</view>
<view class="box">
<view>使用插槽</view>
<Parent>
<template #child>
<view>我是外部插槽</view>
</template>
</Parent>
</view>
</template>
<style>
.box{
margin: 20px 10px;
}
</style>
b文件
<template>
<view class="">
<view>这是Parent组件</view>
<Child>
<template v-if="hasSlot" #child>
<slot name="child"></slot>
</template>
</Child>
</view>
</template>
<script setup>
import {
computed,
useSlots
} from 'vue';
import Child from './Child.vue'
const slotMap = useSlots()
console.log('parent slotMap ->', slotMap)
const hasSlot = computed(() => !!slotMap.child)
</script>
<style>
</style>
c文件
<template>
<view>
<view class="">
这是Child组件
</view>
<slot v-if="hasSlot" name="child" />
<view v-else>我是插槽默认值</view>
</view>
</template>
<script setup>
import {
computed,
useSlots
} from 'vue';
import Child from './Child.vue'
const slotMap = useSlots()
console.log('slotMap ->', slotMap)
const hasSlot = computed(() => !!slotMap.child)
</script>
<style>
</style>
1 个回复
DCloud_UNI_JBB
vue版本是多少?其他小程序有没有这问题?