vue.js 中循环引用组件报错问题怎么解决? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
问题由来
最近在做项目的时候遇到使用循环组件, 因为模式一样, 只有数据不一样. 按照普通组件调用格式来做的时候总是报错, 错误信息为 [vue warn]: Unknown custom element: <selfile> - 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: '<App/>'
- })
用上面的方法全局引入组件就可以解决循环引用组件报错的问题.
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17088.html