vue注册功能,vue3注册组件
无论是Vue还是React，都有组件的概念。组件是可以与其他组件组合的对象。在前端页面开发过程中，一个页面被划分成小模块，每个模块单独定义，每个模块就是一个组件。组件可以重复使用。页面A和页面B有一个类似的模块，可以分离成一个可以本地修改的组件。
目录
概述1、全局注册2、本地注册3、模块系统中的本地注册
概述
组件化的概念让前端页面开发有了更清晰的结构。
Vue中的组件是Vue的实例对象。因此，Vue组件的构造选项与新的Vue()方法构造Vue实例的构造选项相同，可接受的构造选项也相同。除了特定于根实例(如el)的选项之外。但是，Vue组件必须是可重用的，所以构造选项中的数据选项必须是返回对象的函数。
为什么数据选项是一个返回对象的函数，以保证组件的可重用性？
无论如何使用new Vue()或者如何定义Vue组件来创建Vue实例，它执行的操作都是直接将构造选项中的属性值赋给新创建的Vue实例对象。组件重用是指Vue使用相同的构造选项构造多个同名不同地址的Vue实例对象。如果Vue组件定义的构造选项中的数据选项是一个对象，那么在重用组件时，多个组件将共享一个数据对象，因为数据对象的地址是直接赋给组件的Vue实例的。但如果组件定义中的数据选项是函数，Vue会在根据构造选项创建组件时执行该函数，从而获得一个对象。这样，每次创建Vue实例时都会重新生成数据对象，所以很多组件都有自己的数据对象，不会互相影响。
其实组件注册的时候就定义了组件构造选项，对应的Vue组件实例其实是在组件使用的时候创建的。
1 、全局注册
全局注册的组件可以在Vue的根实例及其所有子组件中使用。入口是Vue.component()函数，可以注册一次，随时使用。注册方法如下：
Vue.component(我的组件名称，{
选择
})
例子如下：
//main.js
//此示例是在vue-cli中创建的项目。默认是vue的不完整版本。不能使用template选项，所以使用render函数来编写组件内容。
Vue.component(所有测试，{
data(){
返回{
x:“我是一个全球组件”
}
},
渲染(h){
返回h(div ，this.x)
}
})
//可以直接使用全局注册的组件。
//App.vue
模板
div id=应用程序
所有测试/
/div
/模板
2 、局部注册
本地注册是通过一个普通的JavaScript对象来定义组件。那么组件的命名和注册条目就是Vue实例构造选项中的组件选项。
让组件={选项}
//new Vue创建的根元素Vue实例
新Vue({
埃尔： #app
组件：{
“我的组件名”:组件
}
})
//或者注册Vue组件创建的Vue实例
导出默认值{
组件：{
“我的组件名”:组件
}
}
例子如下：
//App.vue
模板
div id=应用程序
所有测试/
构成部分-a /
构成部分-b /
/div
/模板
脚本
让ComponentA={
data(){
返回{
x:我是本地组件A
}
},
渲染(h){
返回h(div ，this.x)
}
}
导出默认值{
名称：“应用程序”，
组件：{
成分a:成分a，
组件-b :
data(){
返回{
x:我是本地组件B
}
},
渲染(h){
返回h(div ，this.x)
}
}
}
}
/脚本
3 、模块系统中局部注册
在使用Babel和webpack的模块系统中，您可以导入组件的构造选项对象或导入*。vue文件对应的构造选项通过导入导出的方式。
//c.js
导出默认值{
data(){
返回{
x:我是c.js文件单独导出的组件构造选项对象
}
},
渲染(h){
返回h(div ，this.x)
}
}
//D.vue
模板
差异
{{x}}
/div
/模板
脚本
导出默认值{
data(){
返回{
x:我是D.vue文件导出的组件
}
}
}
/脚本
//App.vue
模板
div id=应用程序
分
D /
/div
/模板
从导入丙./c.js
从导入d ./components/D.vue
导出默认值{
名称："应用程序",
组件：{
c，
D
}
}
/脚本
以上就是解读某视频剪辑软件组件注册方式的详细内容，更多关于某视频剪辑软件组件注册方式的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。