uni-app中props传数组 父子组件数组内容不能同步

uni-app中props传数组 父子组件数组内容不能同步

开发环境 版本号 项目创建方式
Mac 11.2.3 HBuilderX

产品分类：uniapp/小程序/阿里

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.1.18

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

基础库版本号：我不知道啊

App下载地址或H5网址：无

示例代码：

父组件：

<template>  
    <view><test-list :list="listData" @change="onListChange"></test-list></view>  
</template>  

<script>  
export default {  
    name: 'test-container',  
    data() {  
        return {  
            listData: ['aaa', 'bbb']  
        };  
    },  
    methods: {  
        onListChange() {  
            console.log('container', this.listData);  
        }  
    },  
    mounted() {  
        setTimeout(() => {  
            this.listData.push('父组件push的');  
        }, 600);  
    }  
};  
</script>

子组件：

<template>  
    <view>  
        <view v-for="(item, index) in list" :key="index">{{ item }}</view>  
    </view>  
</template>  

<script>  
export default {  
    name: 'test-list',  
    props: {  
        list: {  
            type: Array,  
            default() {  
                return [];  
            }  
        }  
    },  
    methods: {  
        change() {  
            this.$emit('change');  
        }  
    },  
    mounted() {  
        setTimeout(() => {  
            this.list.push('子组件push的');  
            this.$forceUpdate();  
            console.log('list', this.list.length, this.list);  
            this.change();  
        }, 1000);  
    }  
};  
</script>

操作步骤：

这两个组件使用easycom默认目录规范存放，并在页面中使用:

<template>  
    <view class="content">  
        <test-container></test-container>  
    </view>  
</template>

更多关于uni-app中props传数组 父子组件数组内容不能同步的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中props传数组 父子组件数组内容不能同步的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，通过props传递的数组默认是单向数据流，子组件直接修改props中的数组不会同步到父组件。这是Vue的设计原则。

在你的代码中，子组件通过this.list.push()直接修改了props，这违反了单向数据流原则。虽然你使用了$forceUpdate()强制更新视图，但父组件的listData并不会同步更新。

解决方案：

  1. 使用事件通信（推荐）： 子组件通过$emit事件通知父组件修改数据：

    // 子组件
mounted() {
  setTimeout(() => {
    this.$emit('update-list', [...this.list, '子组件添加的']);
  }, 1000);
}

    // 父组件
<test-list :list="listData" [@update-list](/user/update-list)="handleListUpdate"></test-list>

methods: {
  handleListUpdate(newList) {
    this.listData = newList;
  }
}

  2. 使用.sync修饰符：

    // 父组件
<test-list :list.sync="listData"></test-list>

// 子组件
this.$emit('update:list', [...this.list, '子组件添加的']);
回到顶部