vue组件冲突之引用另一个组件出现组件不显示的问题


Posted in Vue.js onApril 13, 2022

组件引用另一个组件出现组件不显示

下载的一个vue构建的后台管理系统,导航栏是一个侧边栏,想在头部里面加一个导航

先是导入要使用的组件

import Hamburger from '@/components/Hamburger'
import Nav from '@/components/Nav/index.vue' //自己新建的

然后在 components 里面写入该组件

components: {
    Hamburger,
    Nav  //自己定义的
  }

最后在模板 tamplete 中使用

<template>  
  <div class="navbar">
    <breadcrumb class="breadcrumb-container" />
    <nav /> 
  </div>  
</template>

但是在检查页面的时候发现 页面里面并没有显示 Nav/index.vue 里面的内容

vue组件冲突之引用另一个组件出现组件不显示的问题

然后在cmd上面发现报错,说Nav已定义 未使用

Module Warning (from ./node_modules/eslint-loader/index.js):
error: The "Nav" component has been registered but not used (vue/no-unused-components) at src\layout\components\Navbar.vue:44:5:
  43 |     Hamburger,
> 44 |     Nav
     |     ^
  45 |   },

又试了半天也不知问题出在哪里,然后想着首字母大写有没有,就试了一下,发现居然显示了

vue组件冲突之引用另一个组件出现组件不显示的问题

但是其他的组件都是小写的就可以,不知道为什么

vue声明了一个组件,但是没有显示

声明了一个组件,但是页面不显示,原来问题出在这。套

vue组件冲突之引用另一个组件出现组件不显示的问题

原来我们需要先声明一个Vue的实例,以及把我们自定义的组件放在标签里面。

vue组件冲突之引用另一个组件出现组件不显示的问题

Vue.js 相关文章推荐
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue elementUI表格控制对应列
Apr 13 #Vue.js
vue项目打包后路由错误的解决方法
Apr 13 #Vue.js
vue的项目如何打包上线
vue2的 router在使用过程中遇到的一些问题
Apr 13 #Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 #Vue.js
如何优化vue打包文件过大
Apr 13 #Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 #Vue.js
You might like
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
PHP new static 和 new self详解
2017/02/19 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
django使用图片延时加载引起后台404错误
2017/04/18 Python
python 内置函数filter
2017/06/01 Python
spyder常用快捷键(分享)
2017/07/19 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
高校生生产实习自我鉴定
2013/09/21 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书