vue如何解決循環(huán)引用組件報(bào)錯的問題
問題由來
最近在做項(xiàng)目的時候遇到使用循環(huán)組件，因?yàn)槟Ｊ揭粯?，只有?shù)據(jù)不一樣。按照普通組件調(diào)用格式來做的時候總是報(bào)錯，錯誤信息為[Vue warn]: Unknown custom element: <selfile> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
解決方案
查詢了網(wǎng)上各種資料之后，發(fā)現(xiàn)是循環(huán)調(diào)用組件時，組件比vue實(shí)例后創(chuàng)建，官方文檔里寫組件必須先于實(shí)例化引入，所以說組件沒有正確的引入。
解決方式
解決的方式就是全局引入組件，并且在vue實(shí)例化前。
具體到我們項(xiàng)目中，就是在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/>'
})
用上面的方法全局引入組件就可以解決循環(huán)引用組件報(bào)錯的問題。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文是小編給大家收藏整理的關(guān)于vue項(xiàng)目前端知識點(diǎn)，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
Vue3組件不發(fā)生變化如何監(jiān)聽pinia中數(shù)據(jù)變化
這篇文章主要給大家介紹了關(guān)于Vue3組件不發(fā)生變化如何監(jiān)聽pinia中數(shù)據(jù)變化的相關(guān)資料,pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue3?使用defineAsyncComponent與component標(biāo)簽實(shí)現(xiàn)動態(tài)渲染組件思路詳解
這篇文章主要介紹了vue3?使用defineAsyncComponent與component標(biāo)簽實(shí)現(xiàn)動態(tài)渲染組件,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
antd Form組件方法getFieldsValue獲取自定義組件的值操作
這篇文章主要介紹了antd Form組件方法getFieldsValue獲取自定義組件的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue3計(jì)算屬性和異步計(jì)算屬性方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vant3中使用List組件的一些坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue?關(guān)于$emit與props的使用示例代碼
父組件使用 props 把數(shù)據(jù)傳給子組件，子組件使用 $emit 觸發(fā)父組件的自定義事件，今天通過示例給大家詳細(xì)介紹下Vue?關(guān)于$emit與props的使用，感興趣的朋友一起看看吧2022-03-03
這篇文章主要介紹了vue中如何使用element的日歷組件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-09-09
vue element ui validate 主動觸發(fā)錯誤提示操作
這篇文章主要介紹了vue element ui validate 主動觸發(fā)錯誤提示操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue引入jquery實(shí)現(xiàn)平滑滾動到指定位置
這篇文章主要介紹了Vue引入jquery實(shí)現(xiàn)平滑滾動到指定位置的效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05