注册登录

9***@qq.com

发布：2021-12-16 10:47
更新：2021-12-17 16:47
阅读：392

【报Bug】微信小程序在父组件内更新数组数据后（不改变数组的数据，深拷贝或重新赋值时），将数据传给子组件，子组件监听不到父组件数据的变化，h5没有此问题。

分类：uni-app

bug反馈

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

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 10

HBuilderX类型：正式

HBuilderX版本号： 3.2.16

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

基础库版本号： 2.21.1

项目创建方式： HBuilderX

示例代码：

父组件

<template>  
    <testitem v-model="list" />  
</template>  

<script>  
import testitem from './testitem/testitem.vue';  

export default {  
    components: { testitem },  
    data() {  
        return {  
            list: []  
        };  
    },  
    onLoad() {  
        this.list = [{ name: '1' }, { name: '2' }];  

        setInterval(() => {  
            this.list = this.list.map(item => {  
                // 强制更新数据后才能监听到变化  
                // item._i = Date.now();  
                return item;  
            });  
            console.log('父组件重新赋值', this.list);  
        }, 2000);  
    },  
    methods: {}  
};  
</script>

子组件

<template>  
    <view></view>  
</template>  

<script>  
export default {  
    props: {  
        value: {  
            type: Array,  
            default: () => {  
                return [];  
            }  
        }  
    },  
    watch: {  
        value: {  
            deep: true,  
            immediate: true,  
            handler: val => {  
                console.log('子组件监听变化', val);  
            }  
        }  
    }  
};  
</script>

操作步骤：

直接运行代码示例

预期结果：

在微信小程序中每隔2s应在控制台输出以下信息

父组件重新赋值
子组件监听变化

实际结果：

控制台没有输出 "子组件监听变化" 信息

bug描述：

微信小程序在父组件内更新数组数据后（不改变数组的数据，深拷贝或重新赋值时），将数据传给子组件，子组件监听不到父组件数据的变化，h5没有此问题。

2021-12-16 10:47 负责人:无分享

5 个回复

a***@foxmail.com

你这是语法就有问题，还是多学学吧。。。
父组件：
<template>
<testitem :value="list" />
</template>

a***@foxmail.com

<template>    
    <testitem :value="list" />    
</template>

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

这个是自定义v-model的写法啊! 打开注释可以验证下

2021-12-16 14:08
a***@foxmail.com

回复 9***@qq.com: 你用一下我发的代码看一下

2021-12-16 14:10
9***@qq.com (作者)

回复 a***@foxmail.com:

一样的问题

https://img-cdn-tc.dcloud.net.cn/uploads/answer/20211216/120700795641ed6355184d74d5bb90b4.png

https://img-cdn-tc.dcloud.net.cn/uploads/answer/20211216/2a94ea915b74477c267fb4aef5319512.png

2021-12-16 14:20

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

a***@foxmail.com

。。。，你就当我没说吧

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

你环境版本是多少呀!

我的Hbuilder X 是: 3.2.16

微信开发者工具版本是：1.05.2110290

2021-12-16 19:31
a***@foxmail.com

回复 9***@qq.com: 不是环境的问题，而是你的父组件修改数据的问题。建议你看下vue watch的实现原理

2021-12-17 09:24

a***@foxmail.com

acqui_pin {

font-weight: 600;
font-size: 28px;
font-family: "黑体";
color: #8c888b;
background: -webkit-linear-gradient(45deg, #ee0505, #fb5001, #ffd500, #3e00fa, #74ff03);
-moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
-ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
color: transparent;
-webkit-background-clip: text;
animation: ran 10s linear infinite;
}

@keyframes ran {
from {
backgroud-position: 0 0;
}

to {
background-position: 2000px 0;
}
}
</style>

该问题目前已经被锁定, 无法添加新回复

【报Bug】微信小程序在父组件内更新数组数据后（不改变数组的数据，深拷贝或重新赋值时），将数据传给子组件，子组件监听不到父组件数据的变化，h5没有此问题。

父组件

子组件

操作步骤：

直接运行代码示例

预期结果：

在微信小程序中每隔2s应在控制台输出以下信息

父组件重新赋值
子组件监听变化

实际结果：

控制台没有输出 "子组件监听变化" 信息

bug描述：

5 个回复

acqui_pin {

公告

相关问题

【报Bug】微信小程序在父组件内更新数组数据后（不改变数组的数据，深拷贝或重新赋值时），将数据传给子组件，子组件监听不到父组件数据的变化，h5没有此问题。

父组件

子组件

操作步骤： 直接运行代码示例

预期结果： 在微信小程序中每隔2s应在控制台输出以下信息 父组件重新赋值 子组件监听变化

实际结果： 控制台没有输出 "子组件监听变化" 信息

bug描述：

与内容相关的链接

5 个回复

acqui_pin {

公告

相关问题

操作步骤：

直接运行代码示例

预期结果：

在微信小程序中每隔2s应在控制台输出以下信息

父组件重新赋值
子组件监听变化

实际结果：

控制台没有输出 "子组件监听变化" 信息