Vue 中的组件名称命名说明
在使用Vue自定义组件时,需要给组件命名,即在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了:Vue.component('my-component-name', {/* ... */})该组件名就是Vue.component的第一个参数。给予组件的名字可能依赖于打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,强烈推
在使用Vue自定义组件时,需要给组件命名,即在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了:
Vue.component('my-component-name', {
/* ... */
})
该组件名就是 Vue.component
的第一个参数。
给予组件的名字可能依赖于打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
可以在风格指南中查阅到关于组件名的其它建议。
自定义组件名方式:
使用 kebab-case命名组件
当使用 kebab-case (小写字母加短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 <my-component-name>
。
例如:
Vue.component('my-component-name', {
/* ... */
})
使用 PascalCase命名组件
Vue.component('MyComponentName', {
/* ... */
})
当使用 PascalCase (首字母大写命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name>
和 <MyComponentName>
都是可接受的。
注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。而用驼峰法的名称是无效的。例如以下引用组件无效:
<div id="app">
<div class="my">父组件自己</div>
<!-- 调用子组件时ChildComponent无效,必须用kebab-case方式 -->
<ChildComponent></ChildComponent>
<!--
调用子组件时child-component有效,
组件定义时可以用kebab-case方式或者PascalCase方式命名
-->
<child-component></child-component>
</div>
更多推荐
所有评论(0)