【报Bug】微信小程序插槽bug

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： window11 22h2

HBuilderX类型：正式

HBuilderX版本号： 4.06

第三方开发者工具版本号： stable 1.06.2401020

基础库版本号： 3.3.5

项目创建方式： HBuilderX

示例代码：

//引用的页面
<template>
<view class="content">
来回切换两次后list无法显示直接报错
<view class="flex">
<button @click="active=1">1</button>
<button @click="active=2">2</button>
</view>
<template v-for="item in 2" :key="item">
<chacao v-if="active==item" >
<template #default="{list}">
{{list}}
</template>
</chacao>
</template>
</view>
</template>
<script setup>
import {ref} from "vue"
import chacao from '../../components/chacao.vue'
const active = ref(1)
</script>
<style scoped>
.flex{
display: flex;
}
.flex button{
flex: 1;
}
</style>

//被引用的组件
<template>
<view>
<slot :list="list"></slot>
</view>
</template>

<script setup>
import { ref } from 'vue';
const list=ref([1,2,3,4,5,6,7])

</script>

操作步骤：

点击1，2 来回切换后一次就会出现list无法传值的bug

预期结果：

点击1，2 来回切换后list 照常显示

实际结果：

点击1，2 来回切换后一次就会出现list无法传值

bug描述：

插槽传值bug

hbuilder测试.zip

2024-03-27 10:44 负责人:无分享

1 个回复

yuhespace - Yule

我今天看了一下您给出的代码，我虽然不能解释为什么会出现这种情况，但是大概找到了问题出现的原因

在打包之后的微信小程序的index.js中


"use strict";  
const common_vendor = require("../../common/vendor.js");  
if (!Math) {  
  chacao();  
}  
const chacao = () => "../../components/chacao.js";  
const _sfc_main = {  
  __name: "index",  
  setup(__props) {  
    const active = common_vendor.ref(1);  
    return (_ctx, _cache) => {  
      return {  
        a: common_vendor.o(($event) => active.value = 1),  
        b: common_vendor.o(($event) => active.value = 2),  
        c: common_vendor.f(2, (item, k0, i0) => {  
          return common_vendor.e({  
            a: active.value == item  
          }, active.value == item ? {  
            b: common_vendor.w(({  
              list  
            }, s1, i1) => {  
              return {  
                a: common_vendor.t(list),  
                b: i1,  
                c: s1  
              };  
            }, {  
              name: "d",  
              path: "c[" + i0 + "].b",  
              vueId: "1cf27b2a-" + i0  
            }),  
            c: common_vendor.t(active.value),  
            d: "1cf27b2a-" + i0  
          } :{}, {  
            e: item  
          });  
        })  
      };  
    };  
  }  
};  
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-1cf27b2a"], ["__file", "G:/ChromeDownload/archives/hbuilder测试/hbuilder测试/pages/index/index.vue"]]);  
wx.createPage(MiniProgramPage);

在_sfc_main 中会出现一个active.value == item ?{。。。。。。}:{} 的一个三元运算符结构

问题就出现这个上面，这个表达式每次你点击切换按钮之后，不知道为啥会执行两次
也就是说，当执行的切换时候（此时Item为1）
就会先执行 item为1，然后再执行item为2这种情况

你在这个三元运算符中，加入一个输出语句可以看出
active.value == item ?{。。。console.log("item1",item)}:{console.log("item2",item)}
每次点击按钮切换的时候，无论切换到1还是切换到2，你都会发现最先输出的是item2，也就是会先执行3元的假值那一项

由于你想要的是三元中真值的那一项，第一次执行之后就会报错，你的页面上的值变为了空{}，在页面上就显示了空报错

解决吧很好解决，直接把三元运算符 ?:__，删了，保留真值那一项，效果就正常了

这咱解决不了。。。涉及打包过程了，等官方看到看看我解释的对不对了

7***@qq.com (作者)

谢谢当时我找到这里也没有发现这个问题

2024-03-28 22:20

要回复问题请先登录或注册

【报Bug】微信小程序插槽bug

操作步骤：

点击1，2 来回切换后一次就会出现list无法传值的bug

预期结果：

点击1，2 来回切换后list 照常显示

实际结果：

点击1，2 来回切换后一次就会出现list无法传值

bug描述：

1 个回复

公告

相关问题

【报Bug】微信小程序插槽bug

操作步骤： 点击1，2 来回切换后一次就会出现list无法传值的bug

预期结果： 点击1，2 来回切换后list 照常显示

实际结果： 点击1，2 来回切换后一次就会出现list无法传值

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

点击1，2 来回切换后一次就会出现list无法传值的bug

预期结果：

点击1，2 来回切换后list 照常显示

实际结果：

点击1，2 来回切换后一次就会出现list无法传值