bug内容:

原文:

[Vue warn]: Failed to resolve component: test
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at

必应翻译:

未能解决组件:测试
如果这是一个本地自定义元素,请务必通过编译器从组件分辨率中排除它。

原因预读:

逻辑问题:父组件都已经挂载上了,子组件就没法加载上父组件了!!!

解决步骤:

//定义父组件
const app = Vue.createApp({data() {return {num: 123,}},template: `<test  :content="num" />`,})
//父组件挂载const vm = app.mount('#root');//子组件传值app.component('test',{// 传值载体props:{// 对传入的content进行校验content:{type:Number,   // 浅校验request:true,   // 是否必传default:123,   // 默认值default:function(){return 123;},// 深校验validator:function(value){return value<1000;},}},template:`{{content}}`,})

代码原文解释:

1、定义父组件部分

2、父组件挂载

3、子组件编写

解决步骤:

从bug方向出发

—>子组件有问题

—>检查子组件:子组件无语法格式拼写问题

—>测试子组件内部:分段注释测试代码,发现bug不变

—>父组件没引用上?

—>检查父组件:父组件无语法格式拼写问题

—>分析书写逻辑:父组件创建–》父组件挂载–》子组件传给父组件

逻辑问题:父组件都已经挂载上了,子组件就没法加载上父组件了!!!

—》解决方案: --》父组件创建 app = Vue.createApp

–》子组件传给父组件app.component(‘test’,{})

–》父组件挂载 app.mount()

等所有组件都已经相互连接了,才能挂载

[Vue warn] Failed to resolve component xxx相关推荐

  1. [Vue warn]: Failed to resolve component: xxx

    bug内容: 原文: [Vue warn]: Failed to resolve component: test If this is a native custom element, make su ...

  2. [Vue warn]: Failed to resolve component:XXX

    [问题描述] [Vue warn]: Failed to resolve component: sidebar-item If this is a native custom element, mak ...

  3. vue3[Vue warn]: Failed to resolve component: XXX If this is a native custom element, make sure to ex

    自定义标签存在,但是没有渲染 报错: 原因: 改正前: <script> import {milldeLayoutInMain} from "../../components/h ...

  4. vue:Failed to resolve component:xxx

    vue 项目中控制台报警告: [Vue warn]: Failed to resolve component: xxx If this is a native custom element, make ...

  5. vue3出现此警告信息:[Vue warn]: Failed to resolve component: dpan

    警告内容: runtime-core.esm-bundler.js:6870 [Vue warn]: Failed to resolve component: dpan 原因: 问题出现的原因是因为, ...

  6. Vue3.0使用Element Plus组件报错[Vue warn]: Failed to resolve component: `el-XXXX` If this is a native custo

    文章目录 报错截图 一.问题描述 二.报错信息格式 三.报错原因 报错截图 一.问题描述 我的技术栈:Vue3+TypeScript+Vite+Element Plus 我的报错:Vue3 项目使用 ...

  7. [Vue warn]: Failed to mount component: template or render function not defined. 错误解决方法

    [Vue warn]: Failed to mount component: template or render function not defined. 错误解决方法 参考文章: (1)[Vue ...

  8. [Vue warn]: Failed to mount component: template or render function not defined. (found in root insta

    在开始一个新的项目的时候报了个错 [Vue warn]: Failed to mount component: template or render function not defined. (fo ...

  9. [Vue warn]: Failed to mount component: template or render function not defined.解决方案

    命名视图 vue router 里有一个 模式叫做 命名视图 本来一个页面里面只能有一个路由视图 对应 一个组件,现在可以多个路由视图 对应 多个组件. 出错点 点击标签之后,<router-v ...

最新文章

  1. 127.0.0.1和0.0.0.0地址的区别
  2. react native 网络请求 axios
  3. 扩展的母函数(可以做减法的母函数)(当然只要你愿意也可以做乘除!)
  4. MySQL 8.0 压缩包版安装方法
  5. 3月14日dnf服务器维护,DNF体验服3月14日更新介绍 肝深渊送爆肝王称号!
  6. select里加链接
  7. MyEclipse添加tomcat7出现“Value must be an existing directory”解决方案
  8. 如何克服大数据安全问题
  9. ZeroC IceBox介绍及demo构建
  10. 51CTO博客改版日记(目录) 2006年 by小废
  11. 分享几款国内外免费好用的远程连接服务器软件
  12. 移远BC95 nbiot接入华为OC云平台(电信云)
  13. 基于最新导则下的生态环境影响评价技术方法及图件制作与案例实践
  14. 早停法的应用(keras)
  15. 【IVI】5. [Android Automotive]音频多区
  16. 微信小程序超级占内存_实测:微信小程序究竟会占用多少内存?结果竟然
  17. Git - git checkout git branch 创建/删除分支用法及区别
  18. 【C#】菜鸟教程学习笔记(二)
  19. HTML 复选框元素-复选框(checkbox)
  20. linux教程deepin,国产系统Linux Deepin 2014详细评测

热门文章

  1. 压缩png命令cmd_使用pngquant工具对PNG格式图片进行压缩
  2. 注解(Annotation)
  3. 网页的linke rel=icon详解 favicon深究
  4. aria2c: command not found
  5. unique中译_unique是什么意思_ unique的翻译_音标_读音_用法_例句_爱词霸在线词典...
  6. C# SharpZipLib 压缩中文文件名乱码的解决办法(必看 实测有用)
  7. Java 并发编程实战演练
  8. 转:浅谈程序员的英语学习
  9. 书法拓片matlab,书法拓片是怎么做出来的?
  10. 全网最全JavaScript正则表达式( 校验数字和字母)