1.通过对象的嵌套
在父组件中引入子组件,数据绑定为temp
<script>
export default{
data(){
temp:{
manager:{
name:"",
age:""
}
}
}
}
</script>
子组件中
<script>
export default {
name: "infoDialog",
props:{
data:{
type:Object,
defalut:{}
}
},
data(){
return{
info:this.data
}
},
}
</script>
子组件对于传输数据的使用
<template>
<div class="container">
<span>{{info.manager.name}}</span>
<span>{{info.manager.age}}</span>
</div>
</template>
2.利用监听来进行数值的传值
父组件:
<script>
export default{
data(){
temp:{
name:"",
age:""
}
}
}
</script>
子组件:由于传值时的问题,传过来的data初始时为父组件中data的默认值,监听数值的变化,传最新的值给子组件
<script>
export default {
name: "infoDialog",
props:{
data:{
type:Object,
defalut:{}
}
},
data(){
return{
info:this.data
}
},
watch: {
data: function (newVal, oldVal) {
this.formData = newVal;
}
}
}
</script>
子组件对传输数据的使用:
<template>
<div class="container">
<span>{{info.name}}</span>
<span>{{info.age}}</span>
</div>
</template>
3.直接对props的值进行绑定使用
<template>
<div class="container">
<span>{{data.name}}</span>
<span>{{data.age}}</span>
</div>
</template>
注意:推荐使用第二种和第三种方法