问题分析
今天在写代码的时候,用到了 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的对象