首页 > 其他分享 >vue3 如何判断组件中的 slot 是否有填充?

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

时间:2023-12-29 16:35:40浏览次数:35  
标签:slot 判断 const useSlots vue3 组件 传值

两种方法:

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>

参考

 

标签:slot,判断,const,useSlots,vue3,组件,传值
From: https://www.cnblogs.com/beileixinqing/p/17935180.html

相关文章

  • # vue3 组件之间传值
    vue3组件之间传值非常好,为啥突然开这样一篇博文,首先是因为vue3是未来发展的趋势。其次,vue官方已经确认,将于2023年最后一天停止对vue2项目的维护,这个是官方发出的通知,并且呢,尤雨溪团队也已经将vue3作为了vue的默认版本了,同时呢,无论是elementUI和ant-d组件库团队,也......
  • C++ Qt开发:SqlRelationalTable关联表组件
    Qt是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍SqlRelationalTable关联表组件的常用方法及灵活运用。在上一篇文章中详细介绍了SqlTableModle组......
  • Vue 倒计时小组件
    商城类应用开发中经常要遇到秒杀价或者到时间点开始优惠,这种业务了逻辑通常需要使用到倒计时功能。 主要使用到setTimeout方法,循环的不断调用清除调用清除,具体代码实现import{cancelRaf,rAF}from'@/utils/raf'import{ref,computed,typeRef}from'vue'//定义一......
  • vue3引入使用svg图标
    vue3使用svg图标安装//通过命令安装2个插件npmivite-plugin-svg-icons-Dnpmifast-glob-D在vue.config.js中配置//vue.config.jsimport{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-v......
  • 可拖拽弹框组件
    可拖拽组件<BaseDialog      v-if="totalDialogVisible"      title="合计"      :visible.sync="totalDialogVisible"      width="30%"      @close="handleCloseTotal"      @s......
  • table表格 组件
     <template> <div>  <BaseTable   :searchConfig="searchConfig"   :operateBtnConfig="operateBtn"   :tableData="tableData"   :tableConfig="tableConfig"   :pagination="pagin......
  • 下拉分页组件 select-page
    组件使用文档:https://terryz.gitee.io/vue/#/selectpage/demo实例:需要使用的下拉分页的页面: <el-form-itemlabel="公司"prop="carrierId">     <base-selectPagev-model="ruleForm.carrierId"keyField="crmCorporationId"@ch......
  • 摸鱼摸出来的vue3+element-plus毒蘑菇后台管理:新标签页的实现。
    在浏览器中,点击标签页右边的加号可以新加一个标签页,所以,在毒蘑菇后台管理(简称毒蘑菇儿)中也可以这样操作。点击标签页右边的+按钮就可以打开一个新标签页了,可以打开多个,互不冲突,在新标签页中可以搜索你想要打开的页面,点击后会将该标签页替换成你点击后的页面(跟浏览器操作一致)。点......
  • vue 将百度地图或者高德地图组件化
    一、前言百度地图已经有了react相关的组件库,本人用的百度地图v3.0和vue3我仅仅是抛砖引玉,百度地图webgl、高德地图都是一样的,因为底层都是通过js控制地图如果用组件的方式开发,比如我将BMap.Marker作为一个组件,我暴露一个参数position,其目的是控制BMap.Marker位置......
  • vue3+ts打开echarts的正确方式
    实例项目使用vite5+vue3+ts,项目地址vite-vue3-charts,预览地址https://weizwz.com/vite-vue3-charts准备工作1.注册为百度地图开发者官网地址,然后在应用管理->我的应用里,创建应用,创建好后复制AK2.在根目录的index.html里引入百度地图<head><metacharse......