uni-app 微信小程序中使用带slot-scope的组件 在修改其他页面后 这个组件消失

uni-app 微信小程序中使用带slot-scope的组件 在修改其他页面后 这个组件消失 产品分类：uniapp/小程序/微信

PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 第三方开发者工具版本号 基础库版本号 项目创建方式
Windows 20H2 正式 3.2.16 1.05.2110290 2.21.0 HBuilderX

示例代码：

index.vue

<template>  
  <view class="content">  
    <view> INDEX </view>  
    <slot-list>  
      <template slot-scope="{ item }">  
        <view>  
          {{ item }}  
        </view>  
      </template>  
    </slot-list>  

    <slot-list>  
      <template slot-scope="{ item }">  
        <temp-item :str="item"></temp-item>  
      </template>  
    </slot-list>  
  </view>  
</template>   

<script>  
import slotList from "../../components/list.vue";  
import tempItem from "../../components/temp.vue";  
export default {  
  data() {  
    return {  
    }  
  },  
  onLoad() {  

  },  
  methods: {  

  },  
  components: {  
    slotList,  
    tempItem  
  },  
}  
</script>  

<style>  
</style>

list.vue

<template>  
  <view>  
    <template v-for="item in list">  
      <slot :item="item" />  
    </template>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      list: [  
        "KwdkXvun",  
        "6ACec8S2",  
        "IXe8E92Z",  
        "Wo0T9Nm8",  
        "KmGXd8ME",  
        "tfXOoUSh",  
        "giACmIFW",  
        "uF35w7JP",  
        "xb2MvwNc",  
        "DFeNClsB"  
      ]  
    }  
  },  
}  
</script>  

<style scoped>  
</style>

temp.vue

<template>  
  <view class="str">{{ str }} </view>  
</template>  

<script>  
export default {  
  props: ["str"],  
}  
</script>  

<style scoped>  
.str {  
  color: aqua;  
  border: 1px solid #232323;  
}  
</style>

test.vue

<template>  
  <view> TEST </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  

    }  
  },  
  methods: {  

  }  
}  
</script>  

<style>  
</style>

操作步骤：

修改除了index.vue外的文件,编译后,index页面的list组件消失 再次修改index.vue文件,编译后,index页面的list组件出现


预期结果：

修改其他文件后,使用带slot-scope的组件的页面内的组件不会消失

实际结果：

微信小程序在使用带slot-scope的组件时,修改除了引用的页面外其他的vue文件,都会使引用的页面内的组件消失


---

bug描述：

在微信小程序中使用slot-scope功能,
在修改其他页面和组件自身时,页面上的组件消失;
需要修改引用的页面文件,才能再次使组件出现

详情介绍

全部

主要文件 index.vue 列表组件 list.vue 其他页面 test.vue 其他组件 temp.vue

第一次编译时功能正常
正常

在修改除index.vue外的vue文件并编译都会使组件消失,需要再次修改index.vue文件并编译才能使其重现
组件消失

经排查发现在修改除index.vue外的vue文件后,编译生成的小程序源码index.json文件出现问题
正确的文件
正确的文件

错误的文件
错误的文件


更多关于uni-app 微信小程序中使用带slot-scope的组件 在修改其他页面后 这个组件消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

目前 HBuildx 3.3.5 测试问题被修复了

更多关于uni-app 微信小程序中使用带slot-scope的组件 在修改其他页面后 这个组件消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，“uniapp使用jpush插件,在安卓离线打包release模式下报错” 这个问题解决了吗？

这是一个已知的uni-app编译问题，主要出现在微信小程序平台使用作用域插槽（slot-scope）时。

问题原因： 当修改非当前页面文件时，uni-app编译器在热更新过程中可能错误地更新了页面的JSON配置文件。从你提供的截图可以看出，修改其他文件后生成的index.json中缺少了usingComponents字段，导致微信小程序无法正确注册和渲染组件。

技术分析：

  1. 编译机制问题：uni-app在开发模式下使用增量编译，当检测到文件变更时，会重新编译相关文件。但在处理作用域插槽组件时，编译器可能错误判断了依赖关系
  2. JSON配置丢失：微信小程序要求在使用自定义组件时必须在页面的JSON文件中声明usingComponents。当这个配置丢失时，组件就无法正常渲染
  3. 作用域插槽的特殊性：slot-scope在编译时需要特殊处理，可能触发了编译器的bug

临时解决方案：

  1. 手动触发重新编译：

    • 修改index.vue文件（如添加空格或注释）
    • 保存文件强制重新编译当前页面

  2. 禁用热重载： 在manifest.json中配置：

    {
  "h5": {
    "devServer": {
      "hot": false
    }
  }
}

    注意：这会影响开发体验

  3. 使用备用语法： 考虑使用Vue 2.6+的v-slot语法替代slot-scope：

    <slot-list>
  <template v-slot="{ item }">
    <view>{{ item }}</view>
  </template>
</slot-list>
回到顶部