vue组件命名浅析

布满荆棘的人生 2022-02-01 11:51 371阅读 0赞

注意组件名要以字母开头，后面跟字母、数值或下划线/横线，并且不要与 HTML 元素或 Vue 保留的标签名重名。

--------------------

由于 HTML 标签不区分大小写，所以在生成的标签名都会转换为小写。例如 `<MyComponent></MyComponent>` 会被自动转换为 `<mycomponent></mycomponent>`

![20190514140758707.png][]![20190514141005727.png][]![20190514141046130.png][]

--------------------

当应用到DOM应该这样写<mycomponent></mycomponent> 时，标签 mycomponent 匹配的组件依次为mycomponent（原标签名）、myComponent（camelCase形式）、MyComponent（PascalCase形式），并没有匹配到注册的组件名 myComponent，MyComponent，所以会报找不到组件 <mycomponent> 的警告。

![20190514140429113.png][]

![20190514145128756.png][]

--------------------

当应用到DOM应该这样写<my-component></my-component> 时，标签 my-component匹配的组件依次为  my-component、myComponent（camelCase形式）、MyComponent（PascalCase形式），并没有匹配到注册的组件名 myComponent，MyComponent，所以会报找不到组件 <mycomponent> 的警告。

![20190514150039213.png][]

![2019051415005652.png][]

![20190514145128756.png][]

[20190514140758707.png]: https://img-blog.csdnimg.cn/20190514140758707.png
[20190514141005727.png]: https://img-blog.csdnimg.cn/20190514141005727.png
[20190514141046130.png]: /images/20220201/622b6e2b0bfc430080233f7c99cd94fe.png
[20190514140429113.png]: /images/20220201/293f9da710144842a54b1a0844377d32.png
[20190514145128756.png]: /images/20220201/bfe7e2820b314cf3a627f889e3316afd.png
[20190514150039213.png]: /images/20220201/7d2c130795064e0582241d6703e3e668.png
[2019051415005652.png]: /images/20220201/3a4cc8a357e947cf9ffb032fae975a34.png

发表评论取消回复

表情：

评论列表（有 0 条评论，371人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap组件基础命名

bootstrap 组件命名规范一般所有的基础类都是清空默认样式设置公共样式图标：基础类 glyphicon 具体图标 glyhicon-

迈不过友情╰/ 2023年05月29日 05:23/ 0 赞/ 48 阅读

相关 Vue 组件

首先，我们还是先创建一个vue实例，很熟练了，没难度。 <div id="app"></div> <script> let vm =

落日映苍穹つ/ 2022年05月29日 09:26/ 0 赞/ 473 阅读

相关 vue组件

全局组件  Vue.component('todo-list',{ template:"<li>{

左手的ㄟ右手/ 2022年05月13日 23:23/ 0 赞/ 439 阅读

相关 vue组件

定义全局组件的三种方式方式1,伪代码 <div id="app"> <-- 引用组件,是引号里的名词，不是实例对象--> <m

落日映苍穹つ/ 2022年04月23日 15:38/ 0 赞/ 504 阅读

相关 VUE组件

介绍几种VUE组件定义方法定义VUE 字符串组件 Vue.component('order-item', { //定义VUE组件的属

ゞ浴缸里的玫瑰/ 2022年03月26日 13:10/ 0 赞/ 474 阅读

相关 vue组件命名浅析

注意组件名要以字母开头，后面跟字母、数值或下划线/横线，并且不要与 HTML 元素或 Vue 保留的标签名重名。 -------------------- 由于 HTML

布满荆棘的人生/ 2022年02月01日 11:51/ 0 赞/ 372 阅读

相关 VUE组件

VUE Component 一、概述 1. 作用扩展HTML元素，封装可重用的代码。在需要使用的地方引用组件。二、VUE前情回顾使用： 1.

雨点打透心脏的1/2处/ 2022年01月29日 06:19/ 0 赞/ 458 阅读

相关 vue组件

定义Vue组件什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件

本是古典何须时尚/ 2022年01月05日 07:25/ 0 赞/ 506 阅读

相关 Vue组件

为什么使用组件 JavaScript能力的复用。Vue.js的组件提高重复性，让代码可以复用。组件的用法组件在使用前先需要注册。注册分为两种方式：全局注册和局

叁歲伎倆/ 2021年09月27日 13:56/ 0 赞/ 561 阅读

相关 Vue组件

Vue组件 1. 什么是组件 1. 组件的概念：组件即自定义控件，是Vue.js最强大的功能之一 2. 组件的用途：组件能够封装可重用代码，扩展html标签功能

ゝ一世哀愁。/ 2021年07月24日 23:50/ 0 赞/ 766 阅读