当前位置：首页 > article >正文

Vue3中引用的组件如果使用了插槽，如何做到引用的组件不显示某些元素

article 2024/11/14 8:02:42

某些场景中：比如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>

这样定义插槽就能更加灵活的配置，大家学会了吗

查看全文

http://www.kler.cn/a/293051.html