Vue子组件中渲染动态组件无效（第一次无效、第二次有效）

问题分析

今天在写代码的时候，用到了 Vue框架的动态组件，本来用的好好的（具体用法参考官方文档），后来改进了一下业务功能，在子组建中也使用了和父组件相同的动态组件方法，由于子组件采用对话框i的形式，但是子组件中的动态组件却没有加载出来；准确来说是 第一次没有加载出来，返回上一级界面，重新进入组件，在打开对话框子组件有加载出来了

引入Vue 和 ElementUI


parent.vue


 
		巴拉巴拉
		
		
 

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

aa 组件是一个 封装的对话框组件


然后在 aa组件的对象里面 

 aa.vue
 
 



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

大概就是这样：
导致的问题就是， 第一次进入parent 组件 aa组件的对话框 中的动态组件 无效，第二次进入的时候 才有效

我猜测了一下原因：

1 由于我的dialog是通过visiable.sync 异步懒加载的，可能导致子组件没有得到初始化，
2 可能是由于父组件中也有相同的组件内容，无法第一次在子组件的加载

解决方法

在子组件中采用 组件对象数据作为 组件数据 （Vue[文档动态组件]第二个规则：一个组件的选项对象）

之前是放到 components下， 这次不采用放到components下，而是直接把组件选项的对象赋值给 :is的对象