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 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
详解Vue3使用axios的配置教程
Apr 29 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 显示指定路径下的图片
2009/10/29 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
php文件缓存类汇总
2014/11/21 PHP
php类常量用法实例分析
2015/07/09 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
python协程用法实例分析
2015/06/04 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python3的pip路径在哪
2020/06/23 Python
Python datetime 如何处理时区信息
2020/09/02 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
上课说话检讨书大全
2014/01/22 职场文书
优秀团队获奖感言
2014/02/19 职场文书
安全责任书范本
2014/04/15 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
贪污检举信范文
2015/03/02 职场文书