Vue注册全局组件,vue开发组件
本文主要介绍Vue组件的组织结构和组件注册。为了在模板中使用，必须首先注册这些组件，以便Vue可以识别它们。组件注册有两种类型：全局注册和本地注册。至此，我们所有的组件都只通过Vue.component进行了全球注册，文章学习详情，有需要的朋友可以参考。
:
目录
1.组件的组织2。组件名称2.1组件名称3。全球注册4。本地注册
1、组件的组织
通常一个应用会以一棵嵌套的组件树的形式来组织：
例如：我们可能有标题、侧栏、内容区等组件，每个组件又包含导航链接、博客帖子等其他组件。
为了在模板中使用，必须首先注册这些组件，以便Vue可以识别它们。组件注册有两种类型：全局注册和本地注册。
至此，我们的组件都只是通过 Vue.component 全局注册的：
Vue.component(我的组件名称，{
//.选择.
})
一个全局注册的组件在注册后可以在任何新创建的Vue根实例中使用(通过new Vue ),包括其组件树中所有子组件的模板。
2、组件名
当注册一个组件时，我们总是需要给它一个名字。比如在全局注册的时候我们已经看到了：
Vue.component(我的组件名称，{ /*.*/})
组件名是Vue.component的第一个参数
2.1 组件命名方式
定义组件名的方式有两种：
短横线分隔命名：我的组件名称
首字母大写命名：我的组件名称
短横线分隔命名
Vue.component(我的组件名称，{ /*.*/})
当使用(由名称分隔的短破折号)定义组件时，它的用法如下：my-component-name/my-component-name。
首字母大写命名
Vue.component(MyComponentName ，{ /*.*/})
使用(用大写字母命名)定义组件时，在引用此自定义元素时，可以使用这两种命名方法。也就是说，my-component-name和MyComponentName都是可以接受的。
注意：然而，当直接在DOM(即不是字符串的模板)中使用时，只有分隔命名的短横线是有效的。
3、全局注册
全局注册就是使用Vue.component 来创建组件：
爪哇
Vue.component(我的组件名称，{
//.选择.
})
这些组件是全球注册的。也就是说，注册后它们可以用在任何新创建的Vue (new Vue)的根实例的模板中。
比如：
div id=应用程序
组分a/组分a
组件b/组件b
组件c/组件c
/div
Vue.component(component-a ，{ /*.*/})
Vue.component(component-b ，{ /*.*/})
Vue.component(component-c ，{ /*.*/})
新Vue({ el: #app })
但是，它很少用于实际项目的全球注册。
4、局部注册
全球注册往往不理想。例如，如果您使用webpack这样的构建系统，全局注册所有组件意味着即使您不再使用某个组件，它仍然会包含在您的最终构建结果中。这就导致用户下载的JavaScript不必要的增加。
在这些情况下，你可以通过一个普通的 JavaScript对象来定义组件：
让ComponentA={
模板：` phello/p
}
让ComponentB={
模板：` p世界/p
}
然后在 components 选项中定义你想要使用的组件：
新Vue({
埃尔： #app ，
组件：{
成分a:成分a，
组件-b :组件b
}
})
对于components对象中的每个属性，其属性名是自定义元素的名称，其属性值是该组件的option对象。
当然，在实际的开发过程中，我们使用模块系统来注册更多的组件，这将在后面介绍。
关于Vue组件的组织结构和注册细节的这篇文章到此为止。有关Vue组件的组织结构和注册内容的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。