vue中修改props传进来的值

众所周知，vue是单向数据流，一般我们也不会在子组件里面修改父组件传进来的值，但总有需要修改的时候。

前段时间一个项目中有遇到上述情况，假设我直接传进来一个list， 当时我直接在里面改了list，但是却惊讶的发现没有报错，以前好像有遇到直接修改抛出错误的，但这次却没有，当时也没有多想，最近空闲下来又想了下，发现自己确实**了(此处省略两字^_)。原因如下：

因为我传进来的list是个数组，属于引用类型，修改子组件相当于把父组件也同时修改了，所以没有报错，如果是个基本类型的数据直接修改那么vue会报错。

在子组件修改props的方法：

1. 子组件data中拷贝一份，注意引用类型需要深拷贝，根据需求可以watch监听

data() {
    return {
        newList: this.list.slice()
    }
},
watch: {
    list(newVal) {
        this.newList = newVal
    }
}

2. 通过计算属性修改

computed: {
    nList() {
        return this.list.filter(item => {
            return item.isChecked
        })
    }
}

3. 通过研究大佬们的写法又发现了一种修改方式： sync修饰符

父组件 传进去的时候加上 .sync

子组件 通过this.$emit(‘update:xxx’, params)

// 父组件
<todo-list :list.sync="list" />
 
// 子组件
methodName(index) {
    this.$emit('update:list', this.newList)
}