問題
在用vue開發時碰到父組件傳值子組件時不能觸發子組件的props里對應的值的default值。
父組件代碼:
<template>
<div>
<TabOrderClaim
:compData="companyInfo"
></TabOrderClaim>
</div>
</template>
<script>
import TabOrderClaim from './child/tab-order-claim'
export default {
components: {
TabOrderClaim,
},
data() {
return {
companyInfo: {},
//公司信息
}
},
computed: {},
created() {
},
mounted() {},
methods: {
},
}
</script>
<style lang="scss" scoped>
</style>
子組件:
<template>
<div>
<div>
<div>
<div>
<span>
{{
companyObject.data.taxname === ''
? '[請填入營業執照公司全稱]'
: companyObject.data.taxname
}}
</span>
<span>
{{
companyObject.data.taxno === ''
? '[請填入社會統一信用編碼]'
: companyObject.data.taxno
}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
compData: {
type: Object,
default: function() {
return {
code: 200,
data: {
taxname: '',
taxno: '',
},
msg: '',
}
},
},
},
data() {
return {
companyObject: this.compData,
orderClaimInfo: false,
}
},
computed: {},
created() {},
mounted() {},
methods: {
},
watch: {
compData(value) {
console.log(value)
this.companyObject = value
},
},
}
</script>
<style lang="scss" scoped>
</style>
解決方法
將父組件data return中的companyInfo修改為undefined,則子組件的props中對應的值的default生效。
data() {
return {
companyInfo: {},
//公司信息
}
},
修改為
data() {
return {
companyInfo: undefined,
//公司信息
}
},
原因
vue中認為 "" / {} 等是初始化值了,所以傳入值觸發不了default，同時 undefined 一般是不會認為設置值的
由於項目的需求是父組件異步請求數據之后將數據傳給子組件，但實際操作后發現子組件沒有獲取到父組件請求的值的。其原因歸咎於在父組件的異步請求完成之前子組件就已經完成了賦值,但由於父組件傳給子組件的數據只會渲染一次ui界面，所以后續的數據更新后子組件顯示的數據依然不會變化。此刻就需要watch函數監聽數據變化再一次賦值子組件的data層，讓其再次渲染一遍。
父組件子組件的加載順序如圖:
同時提一句,在子組件的mounted鈎子函數里拿不到父組件傳過來的異步數據是由於子組件比父組件先mounted。
最后
十分感謝原博客博主,原博客地址: