uni-app 头条v-slot在页面名称一致情况下渲染异常

uni-app 头条v-slot在页面名称一致情况下渲染异常

操作步骤：

  • 附件demo

预期结果：

  • 附件demo

实际结果：

  • 附件demo

bug描述：

  • 头条v-slot在页面名称一致情况下渲染异常

test.zip


更多关于uni-app 头条v-slot在页面名称一致情况下渲染异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

问题确认，已加分，后续优化

更多关于uni-app 头条v-slot在页面名称一致情况下渲染异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilderX alpha 3.2.5+ 已修复
临时解决方案，替换附件文件到如下路径
HBuilderX-Alpha.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/uni-mp-toutiao/lib/uni.compiler.js

这是一个已知的v-slot作用域插槽在头条小程序平台上的渲染问题。当多个页面使用相同名称的组件，且组件内包含v-slot插槽时，头条小程序可能会错误地复用插槽作用域数据，导致渲染异常。

问题原因： 头条小程序平台对自定义组件和插槽的渲染机制与Vue标准实现存在差异。在页面切换或组件复用时，头条可能未能正确清理和重置插槽的作用域数据，导致数据污染。

解决方案：

  1. 为每个页面组件添加唯一标识（推荐）：

    <!-- 在页面组件的根元素添加唯一class或data属性 -->
<template>
  <view class="page-unique-name">
    <!-- 组件内容 -->
  </view>
</template>

  2. 使用key强制重新渲染：

    <!-- 在包含v-slot的组件上添加唯一key -->
<custom-component :key="pageId">
  <template v-slot="slotProps">
    <!-- 插槽内容 -->
  </template>
</custom-component>
回到顶部