Vue子組件中渲染動態組件無效（第一次無效、第二次有效）

問題分析

今天在寫代碼的時候，用到了 Vue框架的動態組件，本來用的好好的（具體用法參考官方文檔），後來改進了一下業務功能，在子組建中也使用了和父組件相同的動態組件方法，由於子組件採用對話框i的形式，但是子組件中的動態組件卻沒有加載出來；準確來說是 第一次沒有加載出來，返回上一級界面，重新進入組件，在打開對話框子組件有加載出來了

引入Vue 和 ElementUI


parent.vue


<div id="parent"> 
		<span>巴拉巴拉</span>
		<component :is="aaa"></components>
		
 </div>

new Vue({
	el: '#parent',
	data(){
		return {
       currentCom: 'aa'
     }
	},
	components:  { aa: {} ,bb:{},cc:{} }
})

aa 組件是一個 封裝的對話框組件


然後在 aa組件的對象裏面 

 aa.vue
<div> <dialog :visiable="show"></dialog> </div>



 new Vue({
	el: '#aa',
	data(){
		return {
       currentCom: 'bb',
       show: false
     }
	},
mounted(){
this.show = true;
},
	components:  { bb:{},cc:{} },
	template: `<div><component :is="currentCom"></component></div>`
})

大概就是這樣：
導致的問題就是， 第一次進入parent 組件 aa組件的對話框 中的動態組件 無效，第二次進入的時候 纔有效

我猜測了一下原因：

1 由於我的dialog是通過visiable.sync 異步懶加載的，可能導致子組件沒有得到初始化，
2 可能是由於父組件中也有相同的組件內容，無法第一次在子組件的加載

解決方法

在子組件中採用 組件對象數據作爲 組件數據 （Vue[文檔動態組件]第二個規則：一個組件的選項對象）

之前是放到 components下， 這次不採用放到components下，而是直接把組件選項的對象賦值給 :is的對象