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 数据操作相关总结
Dec 17 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
深入了解php4(2)--重访过去
2006/10/09 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
python计算最大优先级队列实例
2013/12/18 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
.net面试题
2015/12/22 面试题
电子信息专业自荐书
2014/02/04 职场文书
会计助理岗位职责
2014/02/17 职场文书
工程建设实施方案
2014/03/14 职场文书
最美护士演讲稿
2014/08/27 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
同事欢送会致辞
2015/07/31 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
Mysql案例刨析事务隔离级别
2021/09/25 MySQL