vue 動態組件的傳值

vue項目開發中會用到大量的父子組件傳值，也會用到動態組件的傳值，常規子組件獲取父組件的傳值時，第一次是獲取不到的，這時候有兩種解決方案

第一種：

父組件向子組件傳的是一個json對象,ES6的方法Object.keys() 轉化成數組，再判斷數組的長度。如果傳的是數組，直接判斷長度就行

<!--父組件動態內容區域-->
<component :is="currentView" :clientDetails="clientDetails" v-if="Object.keys(clientDetails).length > 0"></component>

 

第二種：

第二種方法是子組件監聽處理

<!--父組件動態內容區域-->
<component :is="currentView" :clientDetails="clientDetails"></component>

<!--子組件監聽-->
watch: {
    clientDetails(newVal){
        this.expandDetail = newVal;
        console.log(this.expandDetail);
    }
},

注：:is="currentView"是用來控制動態組件的，currentView的值改變會使用不同的子組件

貼一段項目中用到的代碼

// 左側菜單切換
handleChangeMenu (code) {
    this.currentView = code
},

components:{
    expand: () => import('../groups/expand'),
    certificates: () => import('../groups/certificates'),
    contacts: () => import('../groups/contacts'),
    addressview: () => import('../groups/addressview'),
    credit: () => import('../groups/credit')
}