Vue动态组件数据回显,引发的奇怪问题

问题描述

使用VUE的动态组件时,一般情况下没有任何问题,在数据回显的时候,出现报错,这里出现了3次,是因为该组件被我调用了三次,不过这个错误与调用了几次没有关系,就算我只调用一次,也会有这个报错:

clipboard.png

问题出现的环境背景及自己尝试过哪些方法

项目使用vue+element-ui开发,这个页面中使用了element-ui的tabs组件。
问题出现在数据回显的时候,目前来看,只是有错误提示,并不影响功能使用。
已经检查过代码大小写问题。也尝试过webpack的异步加载组件的方式,同样也会报错。
没找出错误原因,麻烦知道的大神告知下,谢谢。

相关代码

动态组件循环渲染
  <el-tabs v-model="changeTab.tab" type="border-card" @tab-click="tabClick">
      <el-tab-pane
        v-for="(item,index) in controlsInfo.content.filter(d=>{ return ['swtime'].indexOf(d.type) === -1 })"
        :key="index"
        :label="item.name"
        :name="item.name"
        :data-type="item.type"
        :lazy="true"
      >

        <component
          :is="item.type"
          :sequences="{sequence: item.sequence, item}"
          :is-cell="isCell"
          @delExistResource="delExistResource"
        />
      </el-tab-pane>
    </el-tabs>
组件注册代码

clipboard.png

详细的堆栈信息
图片描述
阅读 5.6k
5 个回答

既然大小写没问题的话,那注册组件增加一个swtext: Swtext呢?

我觉得还是大小写问题啊,你全部小写试一下吧。

建议你把vfor遍历的数组用计算属性写

Swtext组件内部是不是又使用了Swtext,但是Swtext没有name属性

多谢各位回答,问题已经找到了,报错是因为组件内部有值没有传进去,谢谢各位

推荐问题