javascript - vue使用异步组件结合is按需加载组件的问题
仅有的幸福
仅有的幸福 2017-06-26 10:55:50
[JavaScript讨论组]
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane v-for="item in menu" :label="item.name" :name="item.name" :key="item" :component="item.component"><component :is="item.component"></component></el-tab-pane>
    </el-tabs>
methods: {
    handleClick (tab, event) {
        // 异步加载组件
        let getCompoentIndex = this.menu.findIndex(x => x.name === tab.name)
        let component = this.menu[getCompoentIndex].component
        if (!this.menu[getCompoentIndex].loading) {
          this.menu[getCompoentIndex].loading = true
          Vue.component(component, function (resolve, reject) {
            setTimeout(function () {
              require([`./${component}.vue`], resolve)//比如 abc.vue
            }, 1000)
          })
        }
      }
  }

点击的时候去加载异步组件(可以载入组件),但报下面的错

[Vue warn]: Unknown custom element: <abc> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

尝试为abc组件加上name还是报这样的错,有人知道怎么解决吗?
abc.vue

export default {
    name: 'abc',
}
仅有的幸福
仅有的幸福

全部回复(2)
女神的闺蜜爱上我

找出了方法就是加上if判断

<el-tab-pane v-for="item in menu" :label="item.name" :name="item.name" :key="item" :component="item.component"><component :is="item.component" v-if='flag'></component></el-tab-pane>
data:()=>({
    flag: false
})

然后在点击的时候把flag设置为true就解决了那个报错问题

漂亮男人

我是用WEBPACK解决的。
可以参看我的项目。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号