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项目利用axios请求接口下载excel
Nov 17 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue实力踩坑之push当前页无效
Apr 10 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 imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
Python paramiko模块的使用示例
2018/04/11 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
python的Jenkins接口调用方式
2020/05/12 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
《雨点儿》教学反思
2014/04/14 职场文书
授权委托书范文
2014/07/31 职场文书
高一化学教学反思
2016/02/22 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
python数字图像处理实现图像的形变与缩放
2022/06/28 Python