[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent .

最新推荐文章于 2024-09-06 10:38:18 发布

bug天选之子

最新推荐文章于 2024-09-06 10:38:18 发布

阅读量321

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_70245286/article/details/130909779

版权

文章讨论了在Vue.js中使用props时遇到的问题，即子组件不能直接修改从父组件接收到的tableData。文章解释了props的单向数据流原则，强调子组件应通过$emit向父组件传递修改请求。接着，提供了三种解决方案：1)在子组件data中创建新的tableDatas副本并修改；2)使用computed属性创建响应式副本；3)通过watch监听props的变化并同步到本地副本。

摘要由CSDN通过智能技术生成

一.控制台报错

大致意思就是props接收到的从父组件传过来的tableData不能直接修改。

二.props单向数据流

props是父子传值中用来在子组件接收父组件传递的值，父传子过程中，父组件可以随意更改要传的值，但是子组件不能直接修改父组件传过来的值，子组件想修改可以通过this.$emit给父组件传值的方式进行修改。

三.报错代码

父组件：

<template>
    <div class="about">
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
                <el-header>Header</el-header>
                <el-main>
                    <OneC :tableData="tableData"></OneC>
                </el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import OneC from "@/components/OneC.vue"
export default {
    name: 'WorkspaceJsonAboutView',
    components: {
        OneC
    },


    data () {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        };
    },

    mounted () {

    },

    methods: {

    },
};
</script>

子组件代码

<template>
    <div class="onec">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script>
export default {
    name: 'HelloWorld',
    props: {
        tableData: {
            type: Array
        }
    },
    data () {
        return {

        }
    },
    mounted () {
        this.tableData = [
            {
                date: '2016-05-02',
                name: '大飞',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '大飞',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '大飞',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '大飞',
                address: '上海市普陀区金沙江路 1516 弄'
            }
        ]
    },

}
</script>

四.解决方法

1.在data中声明一个变量接收props的值,然后再去改变data里的这个值

data () {
        return {
            tableDatas: this.tableData
        }
    },

2. 用computed属性

computed: {
        tableDatas () {
            return this.tableData;
        }
    },

3.用data保存数据，watch监听

data () {
        return {
            tableDatas: this.tableData
        }
    },
    computed: {
        // tableDatas () {
        //     return this.tableData;
        // }
    },
    watch: {
        tableData () {
            this.tableDatas = this.tableData
        }
    },