亲宝软件园·资讯

展开

vue中如何修改props传进来的值

厨樱 人气:0

众所周知,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)
}

加载全部内容

相关教程
猜你喜欢
用户评论