uni-app 作用域插槽编译运行，小程序不显示

uni-app 作用域插槽编译运行，小程序不显示

操作步骤：

见上图代码

预期结果：

作用域插槽声明了，在使用的时候没有接受数据的话，H5和小程序都能正常显示，vue的思想是作用域的数据是可选接受的，就是我传递了。你可以收也可以不收，不影响页面正常展示

实际结果：

只有H5显示正常

bug描述：

我在使用作用域插槽的时候。同样的代码运行到H5是正常的。运行到微信小程序页面无法显示，也没有错误提示。

  1. 用uniapp写的作用域插槽在使用的时候，如果没有接受作用域的数据，H5一样可以渲染，而微信小程序不能渲染。代码看下面第一张截图。
  2. 用uniapp写的作用域插槽在使用的时候，如果有接收作用域的数据。页面正常显示。代码看下面第二张图片

Image Image

信息类型 信息内容
产品分类 uniapp/小程序/微信
PC开发环境 Windows
PC开发环境版本 Windows 11 家庭中文版 系统版本22631.3447
第三方开发者工具 已升级最新稳定版
基础库版本 微信基础库3.4.1
项目创建方式 CLI
CLI版本 已升级最新稳定版

更多关于uni-app 作用域插槽编译运行，小程序不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

另外使用作用域插槽，会自动生成一个view的标签包裹，这是个bug。严重影响开发体验，特别是在做滚动列表的时候，非常难处理

更多关于uni-app 作用域插槽编译运行，小程序不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我也遇到了。顶一个

在使用 uni-app 开发小程序时，如果发现作用域插槽（Scoped Slots）在小程序中不显示，可能是由于以下几个原因导致的。以下是一些常见的问题和解决方法：

1. 作用域插槽的语法问题

确保作用域插槽的语法正确，并且在父组件和子组件中都正确使用。

子组件示例：

<template>
  <view>
    <slot :item="item"></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: { name: 'Test' }
    };
  }
};
</script>

父组件示例：

<template>
  <child>
    <template v-slot:default="{ item }">
      <view>{{ item.name }}</view>
    </template>
  </child>
</template>

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

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

2. 小程序平台不支持作用域插槽

小程序平台（如微信小程序、支付宝小程序）对 Vue 的作用域插槽支持可能有限。确保你使用的 uni-app 版本支持作用域插槽，并且在小程序平台中测试。

3. 编译后的问题

uni-app 在编译过程中可能会对作用域插槽进行处理。如果编译后的代码有问题，可以尝试以下方法：

  • 确保 uni-app 版本是最新的。
  • 清理编译缓存，重新编译项目：
    npm run dev:mp-weixin -- --clear

4. 检查小程序开发工具

确保小程序开发工具是最新版本，并且没有缓存问题。可以尝试以下操作：

  • 关闭开发者工具，重新打开。
  • 清除开发者工具的缓存。

5. 调试问题

如果作用域插槽仍然不显示，可以通过以下方式调试：

  • 在子组件的 slot 中添加默认内容，检查是否渲染：
    <template>
  <view>
    <slot :item="item">
      <view>Default Content</view>
    </slot>
  </view>
</template>
  • 在父组件中检查作用域插槽的数据是否正确传递。

6. 使用普通插槽替代

如果作用域插槽无法解决问题，可以尝试使用普通插槽替代：

<template>
  <child>
    <view>{{ item.name }}</view>
  </child>
</template>
回到顶部