vue3 如何判断组件中的 slot 是否有填充?

两种方法:

1、通过 this.$slots.name

<div class="btn-icon" v-if="$slots.icon">
      <slot name="icon"></slot>
 </div>

2、通过 useSlots 判断

复制代码
<template>
    <div>
        <slot/>
        <slot name="test"/>
        <span v-if=slotTest>123</span>
    </div>
</template>

<script lang="ts" setup>
import { useSlots } from "vue";
//判断<slot/>是否有传值
const slotDefault = !!useSlots().default;
//判断<slot name="test"/>是否有传值
const slotTest = !!useSlots().test;
</script>
复制代码

参考

 

posted @   蓓蕾心晴  阅读(823)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
历史上的今天:
2022-12-29 window.onerror 和window.addEventListener('error')的区别
2022-12-29 前端错误捕获方案总结
2022-12-29 js 实现版本号排序
点击右上角即可分享
微信分享提示