Was tun, wenn vue.js zirkulär auf Komponenten verweist und Fehler meldet?

Vue.js-Methode zur Behebung des Fehlers der Zirkelreferenzkomponente: Öffnen Sie zuerst das Projekt und verwenden Sie die globale Importkomponente. Importieren Sie es dann in [main.js], bevor vue instanziiert wird. Der Code lautet [import selFile from './ Ansichten/Datei /selFile.vue'].

【Empfohlene verwandte Artikel: vue.js】

vue.js-Methode zur Lösung des Fehlerberichts von Zirkelreferenzkomponenten:

Der Ursprung des Problems

Ich bin kürzlich darauf gestoßen Die Verwendung bei der Arbeit an einer Projektschleifenkomponente ist erforderlich, da der Modus derselbe ist, nur die Daten unterschiedlich sind. Beim Befolgen des normalen Komponentenaufrufformats wird immer ein Fehler gemeldet: [Vue-Warnung]: Unbekanntes benutzerdefiniertes Element: 8b192274ffe2a51bf4700f03fc413189 – Stellen Sie sicher, dass Sie den „Namen“ korrekt angegeben haben " Option .

Lösung

Nachdem ich verschiedene Informationen im Internet durchsucht hatte, stellte ich fest, dass die Komponente nach der Vue-Instanz erstellt wird, wenn sie in einer Schleife aufgerufen wird. Im offiziellen Dokument heißt es, dass die Komponente vorher eingeführt werden muss Instanziierung, daher wird die Komponente nicht korrekt eingeführt.

Lösung

Die Lösung besteht darin, die Komponente global und vor der Instanziierung von Vue einzuführen.

Speziell in unserem Projekt wird es in main.js eingeführt.

Der spezifische Code lautet wie folgt: 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;
})

Die Verwendung der oben genannten Methode zur globalen Einführung der Komponente kann das Problem der Fehlerberichterstattung aufgrund zirkulärer Referenzkomponenten lösen.

Verwandte kostenlose Lernempfehlungen: Javascript (Video)

Das obige ist der detaillierte Inhalt vonWas tun, wenn vue.js zirkulär auf Komponenten verweist und Fehler meldet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!