Question

我对VueJS的警告感到困惑，

[Vue警告]：避免直接改变道具，因为只要父组件重新渲染，该值就会被覆盖。而是根据prop的值使用数据或计算属性。 Prop变异：“moduleSpecificProps”

此代码不是有效的; 对不起有点懒。关键是我有一个子模块，它将接受一个属性（moduleSpecificProps）。因此，如果父传递它，子将使用值（tableData：computed属性），否则它将使用默认值。

但我的问题是，如果我想更改子组件内的计算属性的值，我该怎么做？
我应该保留另一个数据字段tableDataCurrentValue并更新它并从tableDataCurrentValue数据字段派生（计算属性）值吗？

我有这样的想法

子组件将有两个数据字段'default_table_data'和'tableDataHolder'。
当更改'tableDataHolder'时会看到'moduleSpecificProps'的更改
计算属性'tableData'将从'tableDataHolder'返回（获取）数据，如果没有找到则使用'default_table_data'
在为计算属性'tableData'赋值时（子组件试图更新该值）它将更新'tableDataHolder'这似乎有用，但不确定使用手表是好的，似乎总是结束观看。

//子组件

<template>
</template>

<script>
    {
        props: {
            moduleSpecificProps: {
                type: Object,
                required: false
            }
        },
        data() {
            return {
                default_table_data: {
                    name: 'User Data',
                    columns: [{'name': 'User id'}, {'name': 'Name'}],
                    data: []
                }
            }
     },
     computed: {
        tableData: {
            get: function() {
                var tableData_temp = this.default_table_data
                tableData_temp['name'] = this.moduleSpecificProps['tableData']['name'] || this.default_table_data['name']
                tableData_temp['columns'] = this.moduleSpecificProps['tableData']['columns'] || this.default_table_data['columns']
                tableData_temp['data'] = this.moduleSpecificProps['tableData']['data'] || this.default_table_data['data']
                return tableData_temp
            },
            set: function(tableData) {
                var tableDataOld = this.tableData
                tableDataOld['name'] = tableData['name'] || tableDataOld['name']
                tableDataOld['columns'] = tableData['columns'] || tableDataOld['columns']
                tableDataOld['data'] = tableData['data'] || tableDataOld['data']
                this.moduleSpecificProps['tableData'] = tableDataOld
            }
        }
    }
  }
</script>

父脚本可以像这样定义子实例：

childConfig = {
    name: 'Student Mark Data',
    columns: [{'name': 'Student Name'}, {'name': 'Mark'}],
    data: [] 
}
<template>
    <child :moduleSpecificProps="childConfig"></child>
</template>

VueJS将值设置为计算属性

0 个答案: