uni-app 微信小程序插槽bug

示例代码：

//引用的页面
<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

信息类别	信息内容
产品分类	uniapp/小程序/微信
PC开发环境	Windows
操作系统版本	window11 22h2
HBuilderX类型	正式
HBuilderX版本	4.06
工具版本号	stable 1.06.2401020
基础库版本号	3.3.5
项目创建方式	HBuilderX

bupafengyu 1楼•15 天前

我今天看了一下您给出的代码，我虽然不能解释为什么会出现这种情况，但是大概找到了问题出现的原因
在打包之后的微信小程序的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元的假值那一项
由于你想要的是三元中真值的那一项，第一次执行之后就会报错，你的页面上的值变为了空{}，在页面上就显示了空报错
解决吧很好解决，直接把三元运算符 ?:__，删了，保留真值那一项，效果就正常了
这咱解决不了。。。涉及打包过程了，等官方看到看看我解释的对不对了

sinazl 2楼•15 天前

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

ionicwang 3楼•15 天前

在使用 Uni-app 开发微信小程序时，可能会遇到一些与插槽（slot）相关的 bug 或问题。以下是一些常见的插槽相关问题及其可能的解决方案：

1. 插槽内容不显示

问题描述：在微信小程序中，插槽内容可能无法正常显示。
可能原因：
- 插槽的父组件未正确传递内容。
- 插槽的命名或默认插槽使用错误。
- 微信小程序的渲染机制与 Uni-app 的差异。

解决方案：

检查父组件是否正确传递了插槽内容。

确保插槽命名一致，例如：

<!-- 父组件 -->
<child-component>
  <template v-slot:default>默认插槽内容</template>
  <template v-slot:custom>自定义插槽内容</template>
</child-component>

<!-- 子组件 -->
<slot name="default"></slot>
<slot name="custom"></slot>

如果问题依旧，尝试将插槽内容直接写在子组件中，检查是否是插槽传递的问题。

2. 插槽样式失效

问题描述：插槽内容的样式无法正常应用。
可能原因：
- 样式作用域问题（scoped CSS）。
- 微信小程序的样式隔离机制。
解决方案：
- 避免在父组件中使用 scoped 样式，或者在子组件中重新定义样式。
- 使用 :host 或 ::v-deep 穿透样式作用域：
```
/* 父组件样式 */
::v-deep .slot-class {
  color: red;
}
```

3. 具名插槽不生效

问题描述：具名插槽无法正确匹配。
可能原因：
- 插槽名称拼写错误。
- 父组件未正确使用 v-slot 语法。
解决方案：
- 检查插槽名称是否一致。
- 确保父组件使用正确的语法：
```
<template v-slot:custom>自定义内容</template>
```

4. 插槽内容重复渲染

问题描述：插槽内容在小程序中重复渲染。
可能原因：
- 微信小程序的渲染机制与 Vue 的差异。
- 插槽内容中包含动态数据或条件渲染。
解决方案：
- 检查插槽内容中是否有 v-if 或 v-for，确保逻辑正确。
- 如果问题依旧，尝试将插槽内容封装为独立的组件。

5. 默认插槽与具名插槽冲突

问题描述：默认插槽和具名插槽同时使用时，内容可能无法正确渲染。
可能原因：
- 默认插槽和具名插槽的优先级问题。
解决方案：
- 确保默认插槽和具名插槽的内容不冲突。
- 可以使用 v-if 控制插槽内容的显示。

6. 插槽内容更新不及时

问题描述：插槽内容在数据更新后未及时渲染。
可能原因：
- 数据未正确响应式更新。
- 微信小程序的渲染机制问题。
解决方案：
- 确保数据是响应式的（如使用 Vue.set 或 this.$set）。
- 手动触发更新，例如使用 this.$forceUpdate()。

7. 插槽在 H5 正常，但在小程序异常

问题描述：插槽在 H5 中正常，但在微信小程序中无法正常显示或渲染。
可能原因：
- 微信小程序的渲染机制与 H5 的差异。
- Uni-app 的跨平台编译问题。
解决方案：
- 检查是否有平台特定代码（如 #ifdef MP-WEIXIN）。
- 在微信小程序中单独调试插槽逻辑。

8. 插槽内容无法绑定事件

问题描述：插槽内容中的事件无法正常触发。
可能原因：
- 事件绑定作用域问题。
- 微信小程序的事件机制与 Vue 的差异。
解决方案：
- 确保事件在正确的组件中绑定。
- 使用 .native 修饰符绑定原生事件（如果需要）。

9. 插槽在自定义组件中无法使用

问题描述：在自定义组件中使用插槽时，内容无法正常显示。
可能原因：
- 自定义组件未正确支持插槽。

解决方案：

确保自定义组件中定义了插槽：

<template>
  <div>
    <slot></slot>
  </div>
</template>