为什么父组件传过来的orderlist，子组件不能直接修改？

Question

我在子组件中，直接修改了父组件传过来的orderlist

<view v-for="(item, index) in orderList" :key="index" class="cart-list mb20">
</view>

        props: {
            orderList: {
                type: Array,
                default: () => []
            }
        },
        beforeMount: function() {
            this.getorderListFun();
        },        
        methods: {
            getCartListFun() {

                let res_ = {
                    "code": 1,
                    "data": {
                        "lists": [{
                                "goods_num": 1,
                                "item_id": 268,
                                "g_status": 1,
                                "img": "http:\/\/likeshop.likemarket.net\/uploads\/images\/20210320153444e0fd63055.jpg",
                                "spec_value_str": "水电费水电费水电费",
                                "price": "10000.00",
                                "sub_price": 10000,
                                "cart_id": 447,
                                "goods_id": 50,
                                "cart_status": 0,
                                "g_del": 0,
                                "selected": 1,
                                "name": "收到梵蒂冈电饭锅电饭锅"
                            },
                            {
                                "goods_num": 1,
                                "item_id": 2,
                                "g_status": 1,
                                "img": "http:\/\/likeshop.likemarket.net\/uploads\/images\/background\/20201210\/5a23d75c44ef8c293aa2a1bed1f10e41.png",
                                "spec_value_str": "阿迪",
                                "price": "43.90",
                                "sub_price": 43.899999999999999,
                                "cart_id": 304,
                                "goods_id": 2,
                                "cart_status": 0,
                                "g_del": 0,
                                "selected": 0,
                                "name": "额额我问阿我认为热舞"
                            }
                        ],
                        "total_amount": 10043.9 - 43.90,
                        "total_num": 2
                    },
                    "msg": "",
                    "show": 0,
                    "time": "0.039259"
                }

                this.orderList = res_.data.lists;
                this.cartType = 1;
                this.totalPrice = 10043.9 - 43.90;
                this.isShow = true
            },

这样写就报我说的那个错误，不能直接修改orderList，为啥呢？传过来的数据，我就是要办它呢，为啥不让办？

没办法，我只好，在data里面，做个中转变量，List，只能用list玩弄了。

        data() {
            return {
                //购物车状态 1为有 2为空 0则什么都不显示
                cartType: 0,
                isShow: false,
                totalPrice: '',
                List:this.orderList,
            };
        },

谁知道是为啥，我想知道为什么。既然是属性，一般都可以修改啊。莫非是只读属性？另外除了我这种做法，还有没有别的更科学的方法。

Answer 1

为了防止某些不在预期的结果出现，所以禁止子组件直接更改父组件传过来的值。具体可以查看 单向数据流

解决方法很多，可以收到数据后变成自己的数据，但是改变后是不会改变父组件的，或者使用父子组件通信的方式更改，如使用$emit触发事件更新数据，最简单的就是使用.sync修饰符，具体看.sync 修饰符

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 2

因为vue.js遵循单向数据流。
官网文档：单向数据流
所以建议emit让父组件去修改数据。

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 3

props是单向数据流，不建议在子组件中修改，因为只要props在父组件中发生改变，子组件的所有prop都将会刷新，而为了防止子组件意外改变造成父组件的状态变更，从而难以确定数据的流向，vue.js会在控制台中给出警告。
如果你想尝试修改prop，那么有两种方式，正如你所说的第一种就是在data中定义一个中间变量如:

  props:{
    orderList: {
       type: Array,
       default: () => []
    }
 },
 data(){
    return {
       newOrderList:this.orderList
    }
 }

第二种的变更则是使用计算属性进行转换。如:

 props:{
    orderList: {
       type: Array,
       default: () => []
    }
 },
 computed:{
    newOrderList(){
       return this.orderList.reverse()
    }
 }

当然，你这里还是采用第一种更改。最后再谈一种方式，那就是当你想更改数据，或者你可以通知一个更改数据的事件，然后去父组件中修改该props的绑定值。如:

    //子组件
    this.$emit("updateOrderList",res._data.orderList);
    //父组件
    updateOrderList(data){
       this.orderList = [...data];
    }

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。