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 router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
vue实现锚点定位功能
Jun 29 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
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
Python程序员开发中常犯的10个错误
2014/07/07 Python
python实现删除文件与目录的方法
2014/11/10 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
python之文件读取一行一行的方法
2018/07/12 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
研究生简历自我评价范文
2014/09/13 职场文书
实名检举信范文
2015/03/02 职场文书
以权谋私检举信范文
2015/03/02 职场文书
如何写新闻稿
2015/07/18 职场文书
会计实训总结范文
2015/08/03 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
Go Plugins插件的实现方式
2021/08/07 Golang
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS