微信小程序：uni-app列表数据渲染子组件修改数据sync/v-model无效的问题

有如下一个列表，将数据循环传递给子组件，实现业务解耦，组件拆分

Vue的正常逻辑是，父组件和子组件的数据传递的是一个对象，属于引用传递，可以直接在子组件中修改数据，父组件中也会变化，它们操作的是同一个数据。

uni-app子组件中修改 H5正常，转为微信小程序后修改失败

解决办法是：将修改的数据以事件的方式传递给父组件，在父组件中修改数据

列表 List.vue

<template><view class="dish-list"><Itemv-for="item in list":item="item"@on-change="handleChange"></Item></view>
</template><script>
import Item from './Item.vue'export default {components: {Item,},data() {return {list: [{id: 1,count: 0,},],}},methods: {handleChange(item, count) {let index = this.list.findIndex((row) => row.id == item.id)// 直接修改顶层数据this.list[index].count = count},},
}
</script>

子组件 Item.vue

<template><view @click="handleClick">{{item.count}}</view>
</template><script>
export default {props: {item: {type: Object,}},methods: {handleClick() {// bug: uni-app子组件中修改 H5正常，转为微信小程序后修改失败// this.item.count++// 修复：将数据修改事件交给父组件处理 	let count = this.item + 1this.$emit('on-change', this.item, count)}},
}
</script><style>
</style>

总结：uni-app使用的vue语法，转为微信小程序之后，部分js语法可能会无效