vue.js循环引用组件报错怎么办-Vue.js-PHP中文网

vue.js循环引用组件报错怎么办

coldplay.xixi

发布： 2020-11-09 11:47:47

原创

2559人浏览过

vue.js解决循环引用组件报错的方法：首先打开项目，使用全局引入组件；然后在vue实例化前，在【main.js】里引入，代码为【import selFile from './views/file/selFile.vue'】。

vue.js循环引用组件报错怎么办

【相关文章推荐：vue.js】

vue.js解决循环引用组件报错的方法：

问题由来

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

立即学习“前端免费学习笔记（深入）”；

解决方案

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

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

193

查看详情

解决方式

解决的方式就是全局引入组件，并且在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: '<App/>'
})

登录后复制

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