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 17 Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
springboot+vue实现文件上传下载
Nov 17 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue封装数字翻牌器
Apr 20 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判断图片格式的七种方法小结
2013/06/03 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
详解YII关联查询
2016/01/10 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
调试代码导致IE出错的避免方法
2014/04/04 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
javascript操作cookie
2017/01/17 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
python实现划词翻译
2020/04/23 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
Python中dict和set的用法讲解
2019/03/28 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
css3 transform属性详解
2014/09/30 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
Java基础类库面试题
2013/09/04 面试题
2013届毕业生求职信范文
2013/11/20 职场文书
理财投资建议书
2014/03/12 职场文书
导师推荐信范文
2014/05/09 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
旅游投诉信范文
2015/07/02 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
编写python程序的90条建议
2021/04/14 Python