Open Skiyee opened 4 months ago
这段代码执行返回一个数组,但该数组是通过 findDir
扫描是否含有 slot
来判断的,但却忽略是否含有 v-if
,导致产物 Prop
中的 u-s
传递是父文件内所有已使用 slot
.
目前产物:
理想产物:
感谢反馈,目前对于这个v-if,v-slot的处理涉及到各种复杂情况,只能暂时先采用静态编译slot插槽的方案,无法在运行时动态的根据变量判断。
那有什么代替方案?我认为这种包裹 v-if
的写法是很常见的 @18148764734
还不支持吗?都没办法透传插槽了
底层组件:
<template>
<view>
<view>
<slot name="header" v-if="hasSlot('header')">
</slot>
<view v-else>
header
</view>
</view>
<view>
<slot name="footer" v-if="hasSlot('footer')">
</slot>
<view v-else>
footer
</view>
</view>
</view>
</template>
<script>
export default {
name: "Demo1",
props:{
customSlots:{
type:Object,
default(){
return {} ;
}
}
},
methods:{
hasSlot(name){
let customValue = this.customSlots[name] ;
if(customValue === true || customValue === false){
return customValue ;
}
return this.$slots[name] ;
}
}
}
</script>
<style scoped>
</style>
中间组件:
<template>
<demo2 :custom-slots="{header:!!$slots.header}">
<template #header v-if="$slots.header">
<slot name="header" title="header"/>
</template>
</demo2>
</template>
<script>
import Demo2 from "./Demo2";
export default {
components:{Demo2},
name: "Demo1"
}
</script>
<style scoped>
</style>
这么特殊判断的
H5端正确渲染,插槽正确消除 微信小程序端,插槽依旧可见
v-if
小于v-slot
优先级