VueJS将值设置为计算属性

我对VueJS的警告感到困惑

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

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

• 但我的问题是，如果我想更改子组件内的计算属性的值，我该怎么办？

• 我应该保留另一个数据字段tableDataCurrentValue并更新它并从tableDataCurrentValue数据字段派生（计算属性）值吗？

I am having a thought like this way

• 子组件将具有两个数据字段'default_table_data'和'tableDataHolder' .

• 并且当更改发生时我将更新“tableDataPols”并更新'tableDataHolder'

• 计算属性'tableData'将从'tableDataHolder'返回（获取）数据，如果没有找到则使用'default_table_data'

• 在为计算属性'tableData'赋值（试图更新值的子组件）时，它将更新'tableDataHolder'这似乎有效，但不确定使用 Watch 是否良好，似乎总是在观察结束 .

//子组件

<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>