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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue如何清除浏览器历史栈
May 25 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实现的微信红包算法分析(非官方)
2015/09/25 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
js 创建书签小工具之理论
2011/02/25 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
python 连接sqlite及简单操作
2017/06/30 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
Python 变量类型详解
2018/10/10 Python
带你认识Django
2019/01/15 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
学校光盘行动倡议书
2015/04/28 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电