How to solve the problem of errors in circular reference components caused by vue

The origin of the problem

Recently, when I was working on a project, I encountered the use of loop components because the pattern is the same, only the data is different. When doing it according to the normal component calling format, there is always an error, with the error message [Vue warning]: Unknown custom element: <selfile> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Solution

After querying various online information, I found that when the component is called loop, the component is created after vue instances. The official document writes that the component must be introduced before instantiation, so the component is not introduced correctly.

Solution

The solution is to introduce components globally and before vue instantiation.

Specifically in our project, it is introduced.

The specific code is as follows:

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

(iView);
(Axios);

(, VTable)
(, VPagination)
("selFile",selFile)

 = false

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

Using the above method to globally introduce components can solve the problem of errors in circular reference components.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.