vue如何解决循环引用组件报错的问题

问题由来最近在做项目的时候遇到使用循环组件,因为模式一样,只有数据不一样。按照普通组件调用格式来做的时候总是报错,错误信息为[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option...
vue如何解决循环引用组件报错的问题
问题由来最近在做项目的时候遇到使用循环组件,因为模式一样,只有数据不一样。按照普通组件调用格式来做的时候总是报错,错误信息为[Vue warn]: Unknown custom element: <selfile> - did you register the component correctly? For recursive components, make sure to provide the "name" option.解决方案查询了网上各种资料之后,发现是循环调用组件时,组件比vue实例后创建,官方文档里写组件必须先于实例化引入,所以说组件没有正确的引入。解决方式解决的方式就是全局引入组件,并且在vue实例化前。具体到我们项目中,就是在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/>'})用上面的方法全局引入组件就可以解决循环引用组件报错的问题。2023-07-27
mengvlog 阅读 8 次 更新于 2025-07-21 18:03:14 我来答关注问题0
  • 解决方式解决的方式就是全局引入组件,并且在vue实例化前。具体到我们项目中,就是在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...

  • 为了解决这个问题,我们需要对 additionalData 功能进行优化,确保它能够向所有 Sass 样式传入共享代码,但需要特别注意避免直接作用于 common.scss 文件本身。可以考虑将 common.scss 中的代码提取至其他文件,或在 additionalData 中采用逻辑判断,避免直接引用 common.scss,转而引入其他不包含循环引用的共享...

  •  猪八戒网 外部js调用vue的变量?

    需要解决循环引用报错问题。具体操作步骤如下:打开vuemain.js项目,使用全局引入组件。在vue实例化前,在main.js里完成引入。通过import,selFile代码,修改vue组件的data引用方式即可。

  •  文暄生活科普 手把手制作Vue3+Flask全栈项目 全栈开发之路实战篇 问卷网站(二)管理员后台

    在实战篇,我们将从项目建立到login页面,进入后台管理员视图的开发。本文将详细介绍如何解决循环引用问题,改进代码结构,并实现添加、删除、修改题目的功能。前端部分,我们将构建home页面,实现题目管理的左右布局,以及添加、编辑题目的功能。使用Vue3响应式数据,使页面操作更加流畅。总结与预告部分,我们将...

  •  文暄生活科普 【持续更新】速览 Vue3 + TypeScript 基础开发规范,这篇就够了!

    首先,推荐使用组合式 API,这相较于 Vue2 的选项式 API 更加灵活和强大。在 Vue3 中,开发者无需再区分 methods 和 data,而是通过 reactive 和 ref 对象进行数据管理。在处理 props 和 emits 时,Vue3 提供了更简洁的语法,通过 `defineProps` 和 `defineEmits` 直接定义组件的属性和事件处理...

檬味博客在线解答立即免费咨询

报错相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部