uni-app 字节小程序下使用 .sync 更新父子组件间的值失效

uni-app 字节小程序下使用 .sync 更新父子组件间的值失效

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

子组件：

<template>  
  <view @click="updateTap">testettsts</view>  
</template>  
<script>  
export default {  
  props: ['shouldShow'],  
  data() {  
    return {};  
  },  

  methods: {  
    updateTap() {  
      console.log(1111);  
      this.$emit('update:shouldShow', !this.shouldShow);  
    },  
  },  
};  
</script>

父组件：

<template>  
<test-com :should-show.sync="shouldShowSpec"></test-com>  
</template>  
<script>  
export default {  
  data() {  
    return {  
      shouldShowSpec: false,  
    };  
  },  
};  
</script>

操作步骤：

见代码实例

预期结果：

能正常更新数据

实际结果：

无法更新数据

bug描述：

子组件通过 .sync 修改父组件的值，目前微信小程序可以，但是字节不成功，能成功触发 emit，但是更新失败。 该功能之前是好用的，7.8~7.11号经测试，模拟器和真机均正常。大概7.12号左右开始模拟器不可用，7.20号在真机抖音上不可用。


更多关于uni-app 字节小程序下使用 .sync 更新父子组件间的值失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

回滚HBuilder X版本是否正常？
正常时和有问题时，字节开发者工具的版本和基础库版本是否一致？

更多关于uni-app 字节小程序下使用 .sync 更新父子组件间的值失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


bug已确认，已加分，预计下版修复

https://github.com/dcloudio/uni-app/issues/2774

HBuilderX alpha 3.2.5+ 已修复

在 uni-app 中，字节小程序环境下使用 .sync 修饰符进行父子组件数据双向绑定失效，通常是由于字节小程序基础库版本更新导致的兼容性问题。根据你的描述，该功能在特定时间点后失效，表明是平台侧更新引入了破坏性变更。

问题分析：

  1. 在微信小程序中，uni-app 通过自定义事件模拟 .sync 语法糖，而字节小程序可能未完全兼容此机制。
  2. 字节小程序近期基础库更新可能修改了自定义事件或数据更新的处理逻辑，导致 this.$emit('update:propName') 无法触发父组件数据响应。

解决方案：

  1. 临时规避方案：
    将 .sync 拆分为显式的事件监听和属性传递：

    <!-- 父组件 -->
<test-com :should-show="shouldShowSpec" [@update](/user/update):shouldShow="val => shouldShowSpec = val"></test-com>

  2. 检查字节小程序基础库版本：
    在开发者工具中确认基础库版本，尝试降低版本测试（若可行），或查阅字节小程序官方更新日志。

  3. 使用 Vue 默认事件机制：
    子组件通过标准事件传递值，父组件手动更新数据：

    <!-- 子组件 -->
this.$emit('change', !this.shouldShow)

<!-- 父组件 -->
<test-com :should-show="shouldShowSpec" [@change](/user/change)="handleChange"></test-com>
methods: { handleChange(val) { this.shouldShowSpec = val } }
回到顶部