有如下一个列表，将数据循环传递给子组件，实现业务解耦，组件拆分
Vue的正常逻辑是，父组件和子组件的数据传递的是一个对象，属于引用传递，可以直接在子组件中修改数据，父组件中也会变化，它们操作的是同一个数据。
uni-app子组件中修改 H5正常，转为微信小程序后修改失败
解决办法是：将修改的数据以事件的方式传递给父组件，在父组件中修改数据
列表 List.vue
<template> <view class="dish-list"> <Item v-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 + 1 this.$emit('on-change', this.item, count) } }, } </script> <style> </style>
总结：uni-app使用的vue语法，转为微信小程序之后，部分js语法可能会无效
