- 组件的命名
在注册一个组件的时候，我们始终需要给它一个名字。比如全局注册的时候
Vue.component(‘my-component-name’, { /* … */ })
该组件的名就是Vue.component 的第一个参数。
组件命名方式有两种：第一种短横线分隔命名定义一个组件（my-component-name）。
第二种首字母大写命名（MyConponentName）。
注意：直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
#全局注册
到目前为止，我们只用过Vue.component 来创建组件： js
Vue.component(“my-component-name” ,{
//…选项…
})
这些组件是全局注册的，也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：
示例：
#局部注册
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：
Var ConponentA = {/* … */}
然后在 conponents 选项中定义你想要使用的组件：
对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。
注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：
示例：
#在模块系统中局部注册
如果你还在阅读，说明你使用了诸如 Babel 和 webpack 的模块系统。在这些情况下，我们推荐创建一个 components 目录，并将每个组件放置在其各自的文件中。
然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：
现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。
#基础组件的自动化全局注册
可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。
所以会导致很多组件里都会有一个包含基础组件的长列表：
而只是用于模板中的一小部分：
如果你恰好使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件的示例代码：
记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。
最后是交流公众号，大家可以关注一下
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/119156.html
