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
vue3.0实现插件封装
Dec 14 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
Vue深入理解插槽slot的使用
Aug 05 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
拼音码表的生成
2006/10/09 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python是否适合网页编程详解
2019/10/04 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
Python eval函数原理及用法解析
2020/11/14 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
平安工地汇报材料
2014/08/19 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python