【报Bug】v-if 与 v-slot:xxx 表现异常

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 11

第三方开发者工具版本号： 1.06.2401020

基础库版本号： 3.4.1

项目创建方式： CLI

CLI版本号： 3.0.0-4000820240401001

示例代码：

// content.vue  
<template v-if="$slots.header">  
  <div style="backgroundColor: red">  
    <slot name="header">  
    you can see this color  
  </div>  
</template>  

// index.vue  
<template v-if="false" #header>  
  <view>  
    Hello There  
  </view>  
</template>

操作步骤：

以下是复现代码，正常情况下应该是这样

复现：Vue-Playground

预期结果：

正确渲染

实际结果：

无法正确渲染，当v-if为false时也会被渲染出来

bug描述：

v-if 与 v-slot:xx 配合使用时，v-if 优先级低于 v-slot:xx

H5端正常，微信小程序异常

2024-04-17 21:28 负责人:无分享

3 个回复

_Skiyee (作者)

详细看 Github Issues，有指定所在问题代码段

HRK_01

感谢反馈，我验证一下，后续再issues进行跟进

HRK_01

感谢反馈，已复现该问题，此问题暂存许久，对于这个v-if,v-slot的处理涉及到各种复杂情况，只能暂时先采用静态编译slot插槽的方案，无法在运行时动态的根据变量判断。

要回复问题请先登录或注册

【报Bug】v-if 与 v-slot:xxx 表现异常

示例代码：

`// content.vue <template v-if="$slots.header"> <div style="backgroundColor: red"> <slot name="header"> you can see this color </div> </template> // index.vue <template v-if="false" #header> <view> Hello There </view> </template>`

操作步骤：

以下是复现代码，正常情况下应该是这样

复现：Vue-Playground

预期结果：

正确渲染

实际结果：

无法正确渲染，当v-if为false时也会被渲染出来

bug描述：

3 个回复

公告

相关问题

【报Bug】v-if 与 v-slot:xxx 表现异常

示例代码： // content.vue <template v-if="$slots.header"> <div style="backgroundColor: red"> <slot name="header"> you can see this color </div> </template> // index.vue <template v-if="false" #header> <view> Hello There </view> </template>

操作步骤： 以下是复现代码，正常情况下应该是这样 复现：Vue-Playground

预期结果： 正确渲染

实际结果： 无法正确渲染，当v-if为false时也会被渲染出来

bug描述：

与内容相关的链接

3 个回复

公告

相关问题

示例代码：

`// content.vue <template v-if="$slots.header"> <div style="backgroundColor: red"> <slot name="header"> you can see this color </div> </template> // index.vue <template v-if="false" #header> <view> Hello There </view> </template>`

操作步骤：

以下是复现代码，正常情况下应该是这样

复现：Vue-Playground

预期结果：

正确渲染

实际结果：

无法正确渲染，当v-if为false时也会被渲染出来