vue 解决循环引用组件报错的问题

Apollo 发布于2019-08-26 12:20 / 2710人阅读

摘要：问题由来最近在做项目的时候遇到使用循环组件，因为模式一样，只有数据不一样。具体代码如下用上面的方法全局引入组件就可以解决循环引用组件报错的问题。

问题由来

最近在做项目的时候遇到使用循环组件，因为模式一样，只有数据不一样。按照普通组件调用格式来做的时候总是报错，错误信息为[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

解决方案

查询了网上各种资料之后，发现是循环调用组件时，组件比vue实例后创建，官方文档里写组件必须先于实例化引入，所以说组件没有正确的引入。

解决方式

解决的方式就是全局引入组件，并且在vue实例化前。
具体到我们项目中，就是在main.js里引入。

具体代码如下main.js：

import Vue from "vue"
import App from "./App"
import router from "./router"
import store from "./store";
import iView from "iview";
import "./styles/index.less"
import {VTable,VPagination} from "vue-easytable"
import "vue-easytable/libs/themes-base/index.css"
import Axios from "./utils/axiosPlugin"
import "./styles/button.css"
import "./styles/common.css"
// require("./mock/mock")
import selFile from "./views/file/selFile.vue"

Vue.use(iView);
Vue.use(Axios);

Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)
Vue.component("selFile",selFile)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: "#app",
  store,
  router,
  components: { App },
  template: ""
})

用上面的方法全局引入组件就可以解决循环引用组件报错的问题。

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108514.html

iView3.x Anchor(锚点)组件导航锚点

摘要：锚点组件导航锚点框架中新添了一个锚点组件，用这个组件去做页面的分类导航正好合适，但是苦于官方文档太过抽象研究了一整天，才勉强可以在项目中应用。 iView3.x Anchor(锚点)组件导航锚点 iview 3.x框架中新添了一个Anchor（锚点组件），用这个组件去做页面的分类导航正好合适，但是苦于官方文档太过抽象研究了一整天，才勉强可以在项目中应用。下面是我研究后的一点总结...

wuaiqiu 2019-08-23 12:20 评论0 收藏0
支持多框架的组件库KPC 1.0正式发布

摘要：自从年月份对外公布以来，已经经过了个月的迭代，期间发布了几十个正式版本，但一直没有到，因为我们觉得是个里程碑版本，我们必须做的足够完善才敢称之为。自从17年11月份对外公布以来，KPC已经经过了8个月的迭代，期间发布了几十个正式版本，但一直没有到1.0，因为我们觉得1.0是个里程碑版本，我们必须做的足够完善才敢称之为1.0。而如今我们有信心对外宣布：KPC 1.0终于来了！其实距离...

刘厚水 2019-08-26 10:10 评论0 收藏0
Vue with typescript

摘要：想要使用语法的话，配合，这个插件，体验更佳，这个插件在语法中实现了。这种方式最接近的单文件组件的写法，如果一个完善项目从改成，用这种方法很快，只要加上和一些必要的变量类型就好了，然后用包裹就好。不推荐混入用这种方式写，无法实现多继承。最近尝试了一下 TypeScript，试着把一个 Vue 项目改成了 TypeScript 的，感觉还不错目前 Vue 和 TypeScript 的配...

JerryWangSAP 2019-08-23 12:35 评论0 收藏0
bootstrap modal上弹出dialog 报错Maximum call stack size

摘要：昨天修改弹出的警告太难看了，改用对话框，然后就报了一个错反复测试，在的模态框上弹出了的，才报这个错的。设置选项为，并通过选项来指定主要的和次要的用户动作。总之，问题解决了。昨天修改alert弹出的警告太难看了，改用dialog对话框，然后就报了一个错： jquery-2.0.2.min.js:5 Uncaught RangeError: Maximum call stack ...

jokester 2019-08-20 11:36 评论0 收藏0