美文网首页
[记录]Vue 1.0动态子组件时,IE下无法渲染、执行meth

[记录]Vue 1.0动态子组件时,IE下无法渲染、执行meth

作者: 艾尔cc | 来源:发表于2018-08-22 16:46 被阅读27次

    一、问题描述

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

    那么问题就来了,在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。

    相关文章

      网友评论

          本文标题:[记录]Vue 1.0动态子组件时,IE下无法渲染、执行meth

          本文链接:https://www.haomeiwen.com/subject/lxlyiftx.html