Vue3警告:Failed to resolve component:XXX的详细解决办法
今天做小项目的时候遇到的问题,上网参考了几个大佬给出的解决方法

方法一:检查组件是否注册
没有注册组件,注册即可
方法二:检查组件名称是否有误
检查一下组件的名称有没有拼错or大小写有问题
方法三:defineComponent
将vue3中的defineComponent去掉
<script>
import { defineComponent } from "vue";
import layaside from "./Aside";
export default defineComponent({
components: {
layaside,
},
setup() {
return {};
},
});
</script><script>
import layaside from "./Aside";
export default {
components: {
layaside,
},
setup() {
return {};
},
};
</script>后来我查了一下defineComponent主要是TS的时候用处比较大,JS也可以不需要。
方法四:组件互相嵌套
可能是你引用的组件互相嵌套,你中有我,我中有你,此时建议
1、把组件注册成全局组件
2、使用 webpack 的异步 import
components: {
TreeFolderContents: () => import('./tree-folder-contents.vue')
}方法五:是否是用对象包裹
以上方法我都试过了,最后解决的办法是将名称外包裹的花括号删除即可

总结
到此这篇关于Vue3警告:Failed to resolve component:XXX的详细解决办法的文章就介绍到这了,更多相关Vue3警告Failed to resolve component:XXX内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue全局自适应大小:使用postcss-pxtorem方式
本文介绍了如何在Vue项目中使用postcss-pxtorem插件实现响应式设计,postcss-pxtorem可以自动将CSS文件中的px单位转换为rem单位,从而实现更好的自适应布局,通过配置postcss-pxtorem插件,可以在构建时自动完成转换,无需手动修改代码2025-01-01
elementui[el-table]toggleRowSelection默认多选事件无法选中问题
这篇文章主要介绍了elementui[el-table]toggleRowSelection默认多选事件无法选中问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
Vue 项目中选择 TSX 而非传统 .vue 文件的原因分析
文章探讨了Vue项目中使用TSX(TypeScript JSX)的背景、优势和局限性,TSX结合了TypeScript和JSX,增强了类型安全和代码组织性,但也增加了学习曲线和可读性问题,对于复杂应用,TSX提供了更大的灵活性和类型支持,逐渐成为一些开发者的选择2024-11-11


最新评论