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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
python print 按逗号或空格分隔的方法
2018/05/02 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
举例讲解Python常用模块
2019/03/08 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
员工拓展培训方案
2014/02/15 职场文书
合同协议书格式
2014/04/18 职场文书
个人简历自荐信
2014/06/26 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
协议书范文
2015/01/27 职场文书
青春雷锋观后感
2015/06/10 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏