[记录]Vue 1.0动态子组件时，IE下无法渲染、执行methods函数

一、问题描述

这是一个数据恢复页面，从文字描述到确认账号到执行恢复数据步骤，因包含多个流程划分组件比较合适。根据来动态加载组件。

那么问题就来了，在chrome/Firefox/Edge下动态子组件都能渲染，而在IE9-11下却无法执行动态子组件‘my-child1’里的函数方法，无法打印 / debugger.

首先看页面模块划分：

组件划分(非工程化项目)

再看代码结构

-- HTML部分

body部分

infoText组件

roadMap组件

-- 子组件

子组件-1

子组件-2

子组件-3

-- JS部分

定义子组件1

定义子组件2

定义子组件3

-- Vue实例

vue

Vue实例下的组件： home，roadMap ，即是私有组件。

home组件和roadMap组件--私有组件

二、追溯问题

正常情况下chrome/firefox/edge/safari，能走到最后一步，子组件my-child1能打印执行函数的信息；

正常情况

但是在IE下，动态子组件却没有显示。

从这里看出是` `并未渲染出任何Dom元素

IE下为渲染成功

当我们考虑到是在子组件里使用动态组件，那么动态组件只在my-child1/my-child2/my-child3使用呢？

而在IE9-11下并未执行子组件的点击函数，也未打印‘MyComponent1 $dispatch changeStep!’的事件派发提示。这里就是症结所在，不执行的话一时没有好的办法了。

---

最后的解决办法就是，不用动态组件，子组件直接在template包裹，用v-if判断显示。阿西吧~

HTML部分

而js部分就不用组件的写法了，也不用组件传值了。

js部分

The End。 Ale-cc。