一、组件名
写组件之前你要明确你的目的,想要做一个什么样的组件,我们在注册一个组件的时候,需要给组件一个名字,对于命名,尽可能明确,使用 kebab-case (短横线分隔命名) 或 PascalCase (首字母大写命名)。
使用 kebab-case (短横线分隔命名) 定义一个组件时,我们在引用这个自定义元素时其格式 :
Vue.component('my-component-name', { /* ... */ }) <my-component-name>
使用 PascalCase (首字母大写命名) 定义一个组件时,我们引用这个自定义元素时,其格式有两种,不过有时这种命名的组件在调用时候,会自动解析成短横线分割命名。
Vue.component('MyComponentName', { /* ... */ }) <my-component-name> <MyComponentName>
二、全局注册
组件全局注册后,可以在任何新创建的Vue根实例的模板中使用。
Vue.component('my-component-name', { // ... 选项 ... })
三、局部注册
全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
四、在模板系统中局部注册
目前学习vue都是用webpack构建的,对于一个网址各组件应该怎么构造分配还是不够熟悉。
我们在不同组件中复用其他组件,需要在局部注册之前导入每个你想使用的组件。
例如,在一个假设的 ComponentB.js
或 ComponentB.vue
文件中,我们需要使用ComponentA和ComponentC,那么我们需要import,同时在 components
选项中定义你想要使用的组件。
import ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC }, // ... }
五、基础组件的自动化全局注册(还未实际应用过)
之前写的父子组件都不是基础通用的组件,如果我设计了很多button类,input类的只包含这种单个元素,在不同组件里频繁的使用,那么就会造成有一些组件中会有很多包含基础组件的长列表,会很冗杂。
如果你使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+),那么就可以使用 require.context
只全局注册这些非常通用的基础组件。