uni-app VUE3 CLI 编译为小程序出现默认插槽内容丢失的问题

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app VUE3 CLI 编译为小程序出现默认插槽内容丢失的问题

操作步骤：

  • 新建VUE3默认项目，创建子组件，设置slot参数给父组件使用。代码见附件工程

预期结果：

  • 正确显示默认插槽内容

实际结果：

  • VUE3编译为小程序出现该问题
  • VUE3编译为H5未出现该问题

bug描述：

微信小程序，子组件使用 <slot :subTitle="subTitle"></slot> 向父组件传参，在VUE3环境编译到开发者工具时发现父组件默认插槽内容丢失。
具体为：定义了参数但未在父组件引用，默认插槽内容就会丢失
编译到H5，不存在该问题

附件：

image

信息类型 内容
产品分类 uniapp/小程序/微信
PC开发环境 Mac
操作系统版本 14.3.1 (23D60)
第三方开发者工具版本 RC 1.06.2409131
基础库版本 3.6.2
项目创建方式 CLI
CLI版本号 3.0.0-4020920240930001

Harmonyos Next教程
2 回复

vue cli 4.29 遇到同样的问题


在使用uni-app结合Vue 3 CLI进行小程序开发时，如果遇到默认插槽内容丢失的问题，这通常与Vue 3的插槽机制和小程序的编译适配有关。下面我将提供一个示例代码和可能的解决方案，帮助你定位和修复这个问题。

示例代码

假设你有一个父组件Parent.vue和一个子组件Child.vue，其中子组件使用了默认插槽。

Parent.vue:

<template>
  <view>
    <Child>
      <view>这是默认插槽的内容</view>
    </Child>
  </view>
</template>

<script setup>
import Child from './Child.vue';
</script>

Child.vue:

<template>
  <view>
    <slot></slot> <!-- 默认插槽 -->
  </view>
</template>

<script setup>
</script>

问题分析

在Vue 3中，<slot>元素用于定义插槽，而默认插槽不需要命名。然而，在uni-app编译为小程序时，可能存在对Vue插槽机制的不完全支持或适配问题，导致默认插槽内容丢失。

解决方案

  1. 确保插槽使用正确：首先检查你的插槽使用是否正确，如上例所示。

  2. 使用具名插槽作为替代：虽然这不是解决默认插槽丢失问题的直接方法，但可以作为临时解决方案，以确保内容正确显示。

    修改后的Child.vue:

    <template>
  <view>
    <slot name="defaultContent"></slot> <!-- 具名插槽 -->
  </view>
</template>

<script setup>
</script>

    修改后的Parent.vue:

    <template>
  <view>
    <Child>
      <template v-slot:defaultContent>
        <view>这是具名插槽的内容</view>
      </template>
    </Child>
  </view>
</template>

<script setup>
import Child from './Child.vue';
</script>

  3. 检查uni-app和依赖版本：确保你使用的uni-app和相关依赖是最新版本，因为新版本可能已经修复了这类问题。

  4. 查阅官方文档和社区：访问uni-app的官方文档和社区论坛，查看是否有其他开发者遇到并解决了类似问题。

  5. 提交Issue：如果问题依旧存在，可以考虑在uni-app的GitHub仓库中提交一个Issue，提供详细的复现步骤和代码示例，以便开发者团队进行调查和修复。

通过上述方法，你应该能够定位并解决uni-app Vue 3 CLI编译为小程序时默认插槽内容丢失的问题。

回到顶部