What to do if vue.js circularly references components and reports errors

vue.js method to solve the error of circular reference component: first open the project and use the global import component; then introduce it in [main.js] before vue is instantiated, the code is [import selFile from '. /views/file/selFile.vue'].

【Recommended related articles: vue.js】

vue.js solves the loop How to report errors by quoting components:

Origin of the problem

I recently encountered the use of loop components when working on a project, because the model is the same, only the data is different. When following the normal component calling format, an error is always reported. The error message is [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option .

Solution

After checking various information on the Internet, I found that when calling the component cyclically, the component is created after the vue instance. In the official document, the component must be written first It is introduced by instantiation, so the component is not introduced correctly.

Solution

The solution is to introduce the component globally and before vue is instantiated.

Specifically in our project, it is introduced in main.js.

The specific code is as follows 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: &#39;<App/>&#39;
})

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

Related free learning recommendations: javascript (video)

The above is the detailed content of What to do if vue.js circularly references components and reports errors. For more information, please follow other related articles on the PHP Chinese website!