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配置axios跨域实现过程解析
Nov 25 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue3不同环境下实现配置代理
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对象类型判断
2008/08/27 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
PHP修改session_id示例代码
2014/01/08 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
php购物车实现方法
2015/01/03 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
php微信开发接入
2016/08/27 PHP
thinkphp分页实现效果
2016/10/13 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
JS中操作JSON总结
2020/12/06 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
Python语言实现将图片转化为html页面
2017/12/06 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Python3 修改默认环境的方法
2019/02/16 Python
详解python中递归函数
2019/04/16 Python
python字符串的拼接方法总结
2019/11/18 Python
python生成任意频率正弦波方式
2020/02/25 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
如何写好自荐信
2014/04/07 职场文书
公司股东合作协议书
2014/09/14 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
学雷锋感言
2015/08/03 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python