Vue3中引用的组件如果使用了插槽，如何做到引用的组件不显示某些元素
某些场景中：比如vant的van-search组件；可以使用提供好的icon和按钮，也可以自定义配置；实现方式如下：
插槽写法如下：
<template>
<div>
<div v-if="!$slots.default">
<!-- 不使用默认插槽时显示的数据 -->
<p>这是没用插槽时显示的数据</p>
</div>
<div v-if="$slots.default">
<!-- 使用默认插槽显示的数据 -->
<slot></slot>
</div>
<!-- 一些其它的内容，可以控制显示隐藏 -->
<div v-if="!hideExtra">
<p>这是一些其它的数据</p>
</div>
</div>
</template>
<script setup>
defineProps({
hideExtra: {
type: Boolean,
default: false
}
})
</script>
父组件引用:
<template>
<div>
<ChildComponent hideExtra>
<p>显示默认插槽数据</p>
</ChildComponent>
</div>
</template>
<script setup>
import ChildComponent from '@/components/ChildrenSlot.vue'
</script>
这样定义插槽就能更加灵活的配置，大家学会了吗