vue组件传值prop传递对象
vue组件传值 prop传递对象
⼤家经常会使⽤组件传值，今天我⽤到的时候突然遇到了⼀些坑，想着今天来记录⼀下，⼤家做⼀个参考，此篇仅说⼀下prop传递对象。⼦组件接收基本的数据类型
⼦组件
<template>
<view v-model="list"></view >
</template>
<script>
export default{
name:"list",
props:{//接收⽗组件传来的数据，指定类型
list:{
type: String,
required:true
vuejson转对象}
},
}
</script>
⽗组件
<template>
<div>
⽗组件{{firstName}}
<list :recive="recive"></list>//绑定要传递给⼦组件的参数
</div>
</template>
<script>
import listfrom '../components/list'// 组件路径
export default{
components:{
list
},//引⼊⼦组件
data(){
return{
recive:{'参数'}
}
}
}
</script>
写到这⾥的时候要注意⼀下，虽然⼦组件v-model绑定了那个list值，但是⼤家可以发现，参数并没有传递过来，并且还会有⼀个报错。The data property "value" is already declared as a prop. Use prop default value instead
这⾥就是需要吧⼦组件接收的的参数变为本地数据。
<template>
<view v-model="list"></view >//插值
</template>
<script>
export default{
name:"list",
props:{//接收⽗组件传来的数据，并指定类型
list:{
type: String,
required:true
}
},
data:function(){
return{
fList:''
}
},
// 将 prop 数据转换为本地数据
computed:{
initData:function(){
return this.fList =this.list
}
}
}
</script>
这⾥需要注意⼀下的最后⼀点是如果⼦组件接收的是对象或者数组数据，或者说对象⾥⾯会有数组数据，因为在作过程中打印上⾯那个本地数据打印出来的是⼀个数组形式的object，后来我发现了问题，需要对本地数据还要进⾏⼀个转化。
<template>
<view v-model="list"></view >//插值
</template>
<script>
export default{
name:"list",
props:{//接收⽗组件传来的数据，并指定类型
list:{
type: String,
required:true
}
},
data:function(){
return{
fList:''
}
},
// 将 prop 数据转换为本地数据
computed:{
initData:function(){
return this.fList =JSON.parse(JSON.stringify(this.list))
}
}
}
</script>
总结⼀下
由于js对象和数组赋值运算，赋值的其实是内存地址，所以两个变量任意⼀个改变，另外⼀个也会跟着改变。这⾥利⽤ JSON.stringify 和JSON.parse() 来进⾏隔离，相当于深度copy。当然也可以⽤ Object.assign() 进⾏拷贝。但是需要注意：Object.assign() 只是最浅的copy， 确定接收的数据对象只有⼀层。如果有多层嵌套，那么底层的数据仍然会被改变。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。