问题分析

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

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[文档动态组件]第二个规则：一个组件的选项对象）
具体用法查看aa子组件的写法

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