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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
php addslashes 函数详细分析说明
2009/06/23 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
python超简单解决约瑟夫环问题
2015/05/12 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
python实现超市商品销售管理系统
2019/11/22 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
2014年个人委托书范本
2014/10/13 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
HAM-2000摩机图
2021/04/22 无线电
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL