Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

在小程序端,v-ifv-slot:xxx 表现异常 #4847

Open
Skiyee opened this issue Apr 17, 2024 · 5 comments
Open

在小程序端,v-ifv-slot:xxx 表现异常 #4847

Skiyee opened this issue Apr 17, 2024 · 5 comments

Comments

@Skiyee
Copy link

Skiyee commented Apr 17, 2024

// 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>

H5端正确渲染,插槽正确消除
微信小程序端,插槽依旧可见

v-if 小于 v-slot 优先级

@Skiyee
Copy link
Author

Skiyee commented Apr 17, 2024

复现:Vue-Playground

@Skiyee
Copy link
Author

Skiyee commented Apr 18, 2024

export const transformSlot: NodeTransform = (node, context) => {

这段代码执行返回一个数组,但该数组是通过 findDir 扫描是否含有 slot 来判断的,但却忽略是否含有 v-if,导致产物 Prop 中的 u-s 传递是父文件内所有已使用 slot.

@Skiyee
Copy link
Author

Skiyee commented Apr 18, 2024

目前产物:
image

理想产物:
image

@18148764734
Copy link
Collaborator

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

@Skiyee
Copy link
Author

Skiyee commented Apr 22, 2024

那有什么代替方案?我认为这种包裹 v-if 的写法是很常见的 @18148764734

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants