uni-app vue3微信小程序动态作用域插槽失效

uni-app vue3微信小程序动态作用域插槽失效

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 Apple M1 Pro
HBuilderX类型 正式
HBuilderX版本号 4.75
基础库版本号 3.8.8
项目创建方式 HBuilderX

操作步骤：

  • 用作用域就失效，不用就可以

预期结果：

  • 正常使用

实际结果：

  • 不渲染

bug描述：

父组件

<template>  
    <view>  
        <image src="/static/logo.png"></image>  
        <Test>  
            <template v-slot:image="{data}">  
                data: {{data}}  
            </template>  
        </Test>  
    </view>  
</template>  

<script>  
    import Test from './Test.vue';  
    export default {  
        components: {  
            Test  
        },  
    }  
</script>

子组件

<template>  
    <view>  
        <view v-for="item in list" :key="item.name">  
            <slot :name="item.name" :data="1"></slot>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                list: [{  
                    name: 'image'  
                }]  
            }  
        }  
    }  
</script>


更多关于uni-app vue3微信小程序动态作用域插槽失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

您好，麻烦发下完整的可复现demo

更多关于uni-app vue3微信小程序动态作用域插槽失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


求解答

精简一下你的代码吧，你是反馈插槽不生效，无关逻辑太多了，我不好删除你的代码

精简了 你看下，场景是遍历循环展示

感谢反馈，问题已复现，已加分。

版本修复后记得mark下我?

回复 snoop: ok

4.81.2025091909-alpha 版本的HX已修复此问题，可升级到此版本

升级后，同一个案例。动态作用域插槽 仍然渲染不出来

回复 myflyer: 发下可复现demo

回复 DCloud_UNI_JBB: demo 已提供，麻烦看下呢

动态插槽 + 插槽作用域 不支持

暂不支持

在uni-app Vue3环境下，微信小程序平台的作用域插槽确实存在一些兼容性问题。从你的代码来看，问题主要出现在动态插槽名称和作用域数据的传递上。

目前Vue3在小程序端对动态插槽的支持还不够完善，特别是在微信小程序平台。你的代码中使用了v-slot:image="{data}"来接收作用域数据，同时子组件通过:name="item.name"动态设置插槽名称，这种组合在小程序端可能无法正确渲染。

建议的解决方案：

  1. 使用静态插槽名称：将插槽名称改为静态值
<!-- 子组件 -->
<slot name="image" :data="1"></slot>
  1. 避免动态插槽名：如果必须动态生成，可以考虑通过条件渲染来实现
<view v-for="item in list" :key="item.name">
  <view v-if="item.name === 'image'">
    <slot name="image" :data="1"></slot>
  </view>
</view>
回到顶部