在vue3中,组件的插槽slot怎么判断父组件传没传插槽内容
【代码】在vue3中,组件的插槽slot怎么判断父组件传没传插槽内容。
·
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、要设置各个组件的别名,以便在获取插槽信息时能够判断传入了那些组件或标签
<script setup lang="ts" >
function defineOptions(tag0:{name:string}){
throw new Error('Function not implemented.');
}
defineOptions({
name:"ElFooter"
})
</script>
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" /* ... */]
}
更多推荐
已为社区贡献1条内容
所有评论(0)