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

问题分析

今天在写代码的时候，用到了 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的对象

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

php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
[vue] 如何在子组件中访问父组件的实例？
[vue] 如何在子组件中访问父组件的实例? this.$parent拿到父组件实例 this.$children拿到子组件实例(数组) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
vue2.0中组建里面套用组件_vue19 组建 Vue.extend component、组件模版、动态组件的实例代码...
具体代码如下所示: document var aaa=vue.extend({//继承出来一个vue类aaa template:' 我是标题3 ' }); var a=new aaa();//a跟vm ...
Vue基础学习笔记Day06_动态组件_插槽_自定义指令
今日目标: 能够了解组件进阶知识能够掌握自定义指令创建和使用学习内容: 学习目录: 组件进阶自定义指令今日总结面试题知识点自测组件创建, 注册和使用 - 伸手就来特别熟练指令的作用 1 ...
[vue] 你有使用过动态组件吗？说说你对它的理解
[vue] 你有使用过动态组件吗?说说你对它的理解通过 Vue 的元素加一个特殊的 is 特性来实现个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨 ...
如何利用自定义的事件，在子组件中修改父组件里边的值？
如何利用自定义的事件,在子组件中修改父组件里边的值? 这是一篇好文章,佩服博主的思维:本文出自http://www.cnblogs.com/padding1015/ 关键点记住:三个事件名字步骤如下 ...
elementui组件中，树形组件的使用
项目场景: elementui组件中,树形组件的使用问题描述: 通过树形结构展示,点击勾选数据.没有展开树结构的情况下,勾选树节点时,其叶子节点全部被勾选,@check-change="h ...
flex datagrid组件中添加别的组件
flex datagrid组件中添加别的组件在flex的dataGrid中,很多情况下列是需要嵌入其他的控制的,比如:checkbox,combox等,此时需要利用dataGrid的如下功能: 1. ...
Vue将页面中Echarts动态图导出Gif动图
Vue将页面中Echarts动态图导出Gif动图首先,准备工作需要三个依赖的js 第一个js采用npm进行安装: npm install html2canvas 第二个js采用下载放入项目中进行使用 ...