组件名大小写
在字符串模板或单文件组件中定义组件时,定义组件名的方式有两种:
使用 kebab-case
app.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时,你在引用这个自定义元素时也必须使用 kebab-case,例如 <my-component-name>
。
使用 PascalCase
app.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name>
和 <MyComponentName>
都是可接受的。注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
全局注册
到目前为止,我们只用过 app.component
来创建组件:
Vue.createApp({...}).component('my-component-name', { // ... 选项 ... })
这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的组件实例的模板中。比如:
const app = Vue.createApp({}) app.component('component-a', { /* ... */ }) app.component('component-b', { /* ... */ }) app.component('component-c', { /* ... */ }) app.mount('#app')
<div id="app"> <component-a></component-a> <component-b></component-b> <component-c></component-c> </div>
局部注册
全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用其中一个组件了,它仍然会被包含在最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
在这些情况下,你可以通过一个普通的 JavaScript 对象来定义组件:
const ComponentA = { /* ... */ } const ComponentB = { /* ... */ } const ComponentC = { /* ... */ }
然后在 components
选项中定义你想要使用的组件:
const app = Vue.createApp({ components: { 'component-a': ComponentA, 'component-b': ComponentB } })
对于 components
对象中的每个 property 来说,其 property 名就是自定义元素的名字,其 property 值就是这个组件的选项对象。
const ComponentA = { /* ... */ } const ComponentB = { components: { 'component-a': ComponentA } // ... }
或者如果你通过 Babel 和 webpack 使用 ES2015 模块,那么代码看起来像这样:
import ComponentA from './ComponentA.vue' export default { components: { ComponentA } // ... }
注意在 ES2015+ 中,在对象中放一个类似 ComponentA
的变量名其实是 ComponentA: ComponentA
的缩写,即这个变量名同时是:
- 用在模板中的自定义元素的名称
- 包含了这个组件选项的变量名
模块系统
如果你没有通过 import
/require
使用一个模块系统,也许可以暂且跳过这个章节。如果你使用了,那么我们会为你提供一些特殊的使用说明和注意事项。
在模块系统中局部注册
如果你还在阅读,说明你使用了诸如 Babel 和 webpack 的模块系统。在这些情况下,我们推荐创建一个 components
目录,并将每个组件放置在其各自的文件中。
然后你需要在局部注册之前导入每个你想使用的组件。例如,假设在 ComponentB.js
或 ComponentB.vue
文件中:
import ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC } // ... }
import ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC } // ... }
推荐....
现在 ComponentA
和 ComponentC
都可以在 ComponentB
的模板中使用了。