子组件接受父组件传递的 props 的值,是不能直接修改的,因为vue的数据流是从上到下 传递,我们可以用计算属性 return一下。
props: {
title: {
type: String
}
},
computed: {
copyTitle() {
return this.title
}
}
这样就可以修改了,而且不影响父级,这样只适合 基本数据类型,而引用数据类型,如果修改的话,还是影响到父级。因为引用数据类型的原因,props 传递的是一个指向。如果修改不影响父级,需要对父级props传递的值深拷贝。
props: {
list: {
type: Array
}
},
computed: {
copyList() {
return JSON.parse(JSON.stringify(this.list))
}
}
或者在传递的时候
<child :list="[...list]"></child> // 一维数组