vue中关于父组件传值给子组件时出现undefined现象
小白学习时Vue时遇到了父组件给子组件传值时,父组件<Details :carId="carId1" :title="title" :patient="patient" :reason="reason" :hostNumber="hostNumber" ></Details>子组件`javascriptprops:{carId:{},title:{type:String,d
·
小白学习时Vue时遇到了父组件给子组件传值时,
父组件
<Details :carId="carId1" :title="title" :patient="patient" :reason="reason" :hostNumber="hostNumber" ></Details>
子组件
`javascript
props:{
carId:{
},
title:{
type:String,
default: '.......',
}
,
patient:{
type:String,
default: '.......',
},
reason:{
type:String,
default: '.......',
},
hostNumber:{
type:Array,
},
},
`` mounted() {
console.log(this.hostNumber)
},
显示这个值为undfined
即使在watch中监听这个变量发现并不能监听到这个值的变化
感觉是子组件渲染的过快,当mounted时父组件还没有给这个变量赋值就传过来完成渲染了。
所以我们得给子组件加点限制让他不要这么快完成渲染,采用v-if
<Details :carId="carId1" :title="title" :patient="patient" :reason="reason" :hostNumber="hostNumber" v-if="hostNumber.length==2&&carId1!=null"></Details>
加的这个限制就是在父组件没有给hostNumber这个变量赋完值之前不准子组件渲染。
感觉v-if比watch深度监听开启立即监听要靠谱所以还是用v-if好一点
更多推荐
已为社区贡献1条内容
所有评论(0)