uni-app 微信小程序端 vue3 default作用域插槽不访问子组件数据时无法展示default插槽内容

产品分类

uniapp/小程序/微信

开发环境、版本号及项目创建方式

项⽬目信息	版本/信息
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	Windows 11, version 24H2（26100.2033）
第三方开发者工具版本号	Stable 1.06.2407120
基础库版本号	3.6.2
项目创建方式	CLI
CLI版本号	3.0.0-4020920240930001
node版本号	16.16.0

示例代码

子组件代码，提供了两个作用域插槽：

<template>  
    <div>  
        我是子组件1  
        <view><slot :text="text"></slot></view>  
        <view><slot name="other" :text="text"></slot></view>  
    </div>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            text: '你好'  
        };  
    }  
};  
</script>

页面代码：

<template>  
    <test1>  
        <template #default>default内容</template>  
        <template #other>other内容</template>  
    </test1>  
</template>  

<script setup lang="ts">  
import test1 from './test1.vue';  
</script>

操作步骤

解压附件后，安装依赖，运行命令：npm run dev:mp-weixin；
微信开发者工具打开对应平台目录，首页即可复现；
测试页面路径：src\pages\index\index.vue

预期结果

default作用域插槽无论是否访问子组件数据，内容都可以正常渲染。

实际结果

default作用域插槽不访问子组件数据时，内容无法渲染。

bug描述

vue3，微信小程序端，如果子组件提供了default作用域插槽，使用时，若不访问子组件的数据，则该default插槽内容就无法展示。如果是其他具名插槽，同样的用法却能正常展示。H5端都可正常展示。

示例图片

下载示例代码

sinazl 1楼•2 个月前

我也遇到了相似的问题，封装的通用组件中含有普通默认插槽，如果父组件使用 <template #default>的方式，倒不是展示不出来，但是数据就乱了，而且比如动态类名（三元字符串形式）等也是不生效的，把<template #default>去掉就可以了。

ionicwang 2楼•2 个月前

三元字符串形式是什么意思，给个 demo

yuanlaile 3楼•2 个月前

在uni-app中使用Vue 3开发微信小程序时，如果遇到default作用域插槽不访问子组件数据时无法展示插槽内容的问题，通常是因为你没有正确地传递插槽数据给父组件。以下是一个示例代码，展示了如何在uni-app的Vue 3组件中正确使用作用域插槽。

子组件 (ChildComponent.vue)

<template>
  <view>
    <slot :data="childData"></slot>
  </view>
</template>

<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      childData: {
        message: 'Hello from Child Component!',
        count: 42
      }
    };
  }
};
</script>

在这个子组件中，我们定义了一个名为childData的数据对象，并通过<slot>标签将其传递给父组件的插槽。

父组件 (ParentComponent.vue)

<template>
  <view>
    <child-component v-slot:default="slotProps">
      <view>Message from child: {{ slotProps.data.message }}</view>
      <view>Count from child: {{ slotProps.data.count }}</view>
    </child-component>
  </view>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

在父组件中，我们使用v-slot:default（或简写为#default，但在Vue 2.6+中更常用的是不带default的简写形式#）来接收来自子组件的插槽数据。这里的slotProps是一个对象，包含了子组件通过<slot>传递的所有数据。在这个例子中，slotProps.data就是子组件中的childData对象。

注意事项

确保Vue版本：上述代码基于Vue 3的语法。如果你使用的是Vue 2，插槽和作用域的语法可能会有所不同。
uni-app配置：确保你的uni-app项目已经正确配置了Vue 3的支持。
微信小程序限制：虽然uni-app尽量封装了小程序和H5的差异，但某些特性（如性能优化、组件库等）在微信小程序中可能有限制或不同表现。

通过上述代码，你应该能够在uni-app的Vue 3项目中正确使用作用域插槽，从而解决不访问子组件数据时无法展示default插槽内容的问题。