Que faire si vue.js fait référence de manière circulaire à des composants et signale des erreurs

La méthode permettant à vue.js de résoudre l'erreur du composant de référence circulaire : ouvrez d'abord le projet et utilisez le composant d'importation global, puis introduisez-le dans [main.js] avant que vue ne soit instanciée, le code est [ ; importer selFile depuis '/views/file/selFile.vue'].

[Articles connexes recommandés : vue.js]

vue.js résout les boucles Comment signaler des erreurs en référençant des composants :

Origine du problème

J'ai récemment rencontré l'utilisation de composants en boucle lorsque je travaillais sur un projet, car le modèle est la même, seules les données sont différentes. Lorsque vous l'effectuez selon le format d'appel normal du composant, une erreur est toujours signalée. Le message d'erreur est [Vue warn] : Élément personnalisé inconnu : - avez-vous enregistré le composant correctement ? Pour les composants récursifs, assurez-vous de fournir ? l'option "name" .

Solution

Après avoir vérifié diverses informations sur Internet, j'ai constaté que lors de l'appel cyclique du composant, le composant est créé après l'instance de vue . Dans la documentation officielle, le composant doit être écrit en premier. Il est introduit par instanciation, donc le composant n'est pas introduit correctement.

Solution

La solution consiste à introduire le composant globalement et avant que vue ne soit instanciée.

Plus précisément dans notre projet, il est introduit dans main.js.

Le code spécifique est le suivant 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;
})

L'utilisation de la méthode ci-dessus pour introduire globalement des composants peut résoudre le problème des erreurs signalées dans les composants de référence circulaires.

Recommandations d'apprentissage gratuites associées : javascript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!