1、使用useslots获取传入的插槽信息
import {useSlots,computed} from "vue" let uSlots = useSlots()
2、判断useslots里面的内容
import type {VNode,Component} from "vue" import {useSlots,computed} from "vue" import type {VNode,Component} from "vue" //插槽信息 let uSlots = useSlots() const isVertical =computed(()=>{ if(uSlots && uSlots.default){ //从默认插槽中获取内容 const VNode:VNode[] = uSlots.default() return VNode.some((vNode)=>{ const tag = (vNode.type as Component).name console.log(tag,"vNode") return tag === "ElHeader"||tag === "ElFooter" // console.log(vNode.type,"vNode") }) }else{ return false } })
3、要设置各个组件的别名,以便在获取插槽信息时能够判断传入了那些组件或标签
4、defineOption是一个插件,需要安装
npm install unplugin-vue-define-options
5、配置vite.config.ts文件,注册defineOption
import DefineOptions from 'unplugin-vue-define-options/vite' export default defineConfig({ plugins: [ DefineOptions() ], )}
6、在tsconfig.json中配置type以便在vue文件中识别
"compilerOptions": { "types": ["unplugin-vue-define-options/macros-global" /* ... */] }