Vue中使用的组件名称与html的标签名字重复

已于 2022-06-05 06:40:58 修改
阅读量3.5k 收藏
点赞数
分类专栏： Vue 文章标签： vue
于 2020-03-30 19:06:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011332271/article/details/105206028
版权

在开发项目中，我们需要创建许多组件，特别要注意的一点是，我们在引用组件使用时，名字千万不要与html中的标签重名，如果出现重名的情况，vue将不知道你使用是vue组件还是HTML标签页，举个栗子：
在这里插入图片描述我们在home组件中引用我们自定义的组件header，由于html中已经存在header标签了，所以当你在home组件中再使用自定义的组件

,vue就会默认为你写的是html标签，这样的话，你自定义的组件header就不会显示出来了。将自定义的组件名字改成myheader或者与html标签页不重复的就可以了，例如这样修改一下名称就可以了：
在这里插入图片描述

Vue组件之全局组件与局部组件的使用详解
08-29
在上面的例子中，我们使用 Vue.component() 方法注册了一个名为 "my-component" 的全局组件，并在两个 Vue 实例中使用了这个组件。 需要注意的是，全局组件必须写在 Vue 实例创建之前，才在该根元素下面生效。如果...
关于template在html/vue中的用法（标签、属性、条件渲染、组件结构）
热门推荐
yolo_______95的博客
10-02 1万+
vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会直接被覆盖。// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。标签在页面加载时该标签中的内容不会显示。元素，但是查看后台dom结构存在template标签。
终于把vue官方的bug找到了，有两个bug，一个是main.js里定义的变量名称与html里div块里的id不符，一个是缺少挂载
weixin_40945354的博客
03-15 397
正确的代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue Mastery</title> <!-- Import Styles --> <link rel="stylesheet" href="./assets/styles.css" /> <!--
vue:组件name名称不能重复
qq_44077052的博客
07-23 1749
组件name名称不能重复，不然无法加载。
记录一个vue 的引入两个组件有相同 ID 问题
he_yanghui的博客
09-15 2422
最近做项目 遇到一个神坑， 我的一个页面引入了两个组件，两个组件下有相同ID 的 div 如下 这是我组件的 div 高拍仪组件和扫描仪组件都有 这个div <div width="100%" height="250px" id='ActiveXDivOne'></div> 这是我的页面 引入了 扫描仪和高拍仪 通过 v-show 控制 <SMY v-show="showDiv('6')" ref="smyViewRef"
vue组件和vue中的同名问题：
weixin_59856312的博客
02-13 2386
组件的概念：通俗的来理解，组件就是一个功能模块，组件是可以复用的vue的一个实列，并且带有一个名字考虑的问题：提升组件的复用性，降低组件之间耦合性 加强内聚。
html 控件命名规则,Vue组件命名规范及技巧讲解
weixin_39752828的博客
06-07 666
编程中变量命名确实令人很头疼。我们模糊地知道，Vue 组件的名称最好不要和原生 HTML 标签相同。为了避免重名，通常会在组件名称前面加上一个前缀，如 el-button、el-input、el-date-picker。这通常不会有什么问题，但有时候你的模板中混杂了原生 HTML 标签和组件标签，要想区分它们并不是很容易。当我看到 Ant.design 的 React 组件是下面这样的时候，我感觉...
第十七节:带你梳理Vue2: Vue组件的认识,创建和使用
最新发布
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
05-27 912
组件系统是 Vue 的另一个重要概念,它是一种抽象的概念，类似于积木中的一块块小积木,通过这些小积木拼接成一个大的模型.
手把手教学，Vue组件和插件的创建与使用
l8023lzy的博客
10-16 4444
手把手教学如何创建和使用Vue组件和Vue插件
Vue2.0——组件
qq_56607109的博客
09-22 880
组件是可复用的 Vue 实例,主要用于开发中 具有相同特征不同数据的模块 把它集成为一个组件 供重复利用组件的属性不能用大写字母 组件的名字可以用驼峰命名法,但是使用的时候必须用连字符 全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)注册的组件不要跟系统标签同名一个vm实例可以有多个局部组件,但是只能供当前vm实例使用不能用外部data里面的数据，因为他是Vue全局的。必须要在过滤器中声明：而且必须在new Vue前申明，不然Vue里面的函数都加载完了还没有找到数据，就
vue eslint html,vue项目整合Eslint和stylelint规范代码
weixin_39720510的博客
06-23 432
前言最近在搭建项目框架，想着上一个项目代码风格各异，就想着在新项目中引入Eslint来规范团队成员代码风格，保持统一，也方便大家维护代码，减少不必要的错误。前端应用愈加复杂，代码规范问题必须通过强制的方式保持统一。以下是团队逐渐摸索出的一些配置，各取所需。Eslint配置在用vue-cli3搭建项目的过程中就会问你是否需要Eslint，选择就好来。如果没有选择后期又想加入eslint，可以手动安装...
vue组件模板加载出现同名的情况如何处理 For recursive components, make sure to provide the "name" option
阿嚏乱码的地方
03-02 5870
昨天在用uni-app写h5项目时出现了一个问题： 报错： Unknown custom element: <swiper-img> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 本身uni-app中自带了名...
vue3基础（二）自定义事件名称相同问题， 保持方法的this不变function.prototype.bind
差不少的博客
08-03 896
vue3自定义事件名称相同问题， 保持方法的this不变function.prototype.bind
（三十一）Vue之自定义事件
忆亦何为的博客
01-01 516
自定义事件一种组件间通信的方式，适用于：子组件 ===> 父组件例如：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。我们把Footer组件与App组件的交互从props改为自定义事件第一步：在App组件里给Footer组件绑定自定义事件第二步：定义回调，这个回调之前已经定义好了，直接调用即可第三步：在Footer组件定义触发第四步：在App组件解绑。
vue引入组件正确命名方式
weixin_43939111的博客
12-30 2060
https://www.cnblogs.com/e0yu/p/10795176.html
html如何引用vue.js,vue如何引用其他组件（css和js）
weixin_34195649的博客
06-18 460
1.vuejs组件之间的调用components注意：报错Do not use built-in or reserved HTML elements as component id:修改组件的名字，例如不能使用address为组件名字组件名字不要使用内置的或保留HTML元素为组件id，App.vue是一个入口，vue必须注册才能使用2.vue引入外部的css，放在和引入vue的位置一样./代表当前...
CSS选择器——样式的航标
Mr-PyPio的博客
11-08 605
行内样式表越来越少的人使用，内联样式表会使HTML代码臃肿，导致维护起来会比较麻烦；相对的，内联样子表和外部样式表受到程序猿的广泛使用。要使用这两种样式表，这时候就需要用到一个工具——CSS选择器。
vue 中 import引入相同的方法名称解决方法
前端打工人的博客
06-28 2762
当引入了2个不同的文件，方法名称list都是一样的，就会出现报错。如果之前文件用的地方比较多，直接改名称的话，可能会漏掉，会引起不必要的麻烦，那如何解决呢。
Vue自定义组件的属性名称 和 引用该组件时传递的属性名称
听海边涛声
05-03 344
Vue自定义组件的属性名称 和 引用该组件时传递的属性名称
Vue.js 2.x组件定义与注册全面解析
全局注册的组件可以在整个Vue实例中使用，而局部注册的组件只能在其父组件的范围内使用。 **全局组件的定义和注册** 全局组件的注册通常涉及两个步骤：首先使用`Vue.extend()`方法定义组件，然后使用`Vue....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ponGISer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值