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中使用mockjs代码实例
Nov 25 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
解决vue中provide inject的响应式监听
Apr 19 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
js a标签点击事件
2017/03/30 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
Selenium的使用详解
2018/10/19 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
python框架django项目部署相关知识详解
2019/11/04 Python
iPython pylab模式启动方式
2020/04/24 Python
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
初一科学教学反思
2014/01/27 职场文书
探亲邀请信范文
2014/01/30 职场文书
《泉水》教学反思
2014/04/11 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers
win7配置本地ftp服务器的图文教程
2022/08/05 Servers