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

到此这篇关于vue中修改props传进来的值的文章就介绍到这了,更多相关vue修改Props值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！