vue中的component组件用法,vue component 属性
这篇文章主要介绍了某视频剪辑软件动态组件成分的深度使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
背景介绍组件封装某视频剪辑软件动态组件改造组件某视频剪辑软件动态组件的理解什么是动态组件
背景介绍
最近在封装一些基于某视频剪辑软件元素的组件，将一些实际项目中常用的，有一定规律的业务进行抽象总结，开发出相应的某视频剪辑软件组件。
组件封装
首先想到的就是形式组件，在元素用户界面提供的形式中，我们需要一个一个的去添加对用的表单项
El-form ref= form :model= form label-width= 80px
El-表单-项目标签=活动名称
埃尔输入v-model=form.name/el输入
/El-表单-项目
El-表单-项目标签=活动区域
El-select v-model= form。区域 placeholder=请选择活动区域
埃尔选项标签=区域一值=上海/el选项
埃尔选项标签=区域二值=北京/el选项
/el-select
/El-表单-项目
/el格式
可以发现，每个表单项的结构都是一样的，只是其中包含的组件不一样。这样，我们就可以通过封装组件的方式，将代码简化，
El-form ref= form :model= form label-width= 80px
我的表单项目
标签=活动名称
v-model=form.name
widget= input /我的表单项目
我的表单项目
标签=活动区域
v-model=form.region
占位符=请选择活动区域
widget=select
:options=options/my-form-item
/el格式
**我的表单项目。vue **0.1版如下
el-form-item :label=title
El-select v-if= widget=== select v-model= form[path]:clearable= true
El-option v-for= options in options :key= option。 code :label=选项。 name :value=选项。代码/El选项
/el-select
El-input v-else-if= widget== input v-model= form[path]:clearable= true /El-input
/El-表单-项目
0.1版，直接使用了控制显示来处理小部件类型，此时，输入和挑选的逻辑耦合在了一起，再需要其他的组件类型时，这个文件结构会很复杂。
Vue动态组件
在某视频剪辑软件中，提供了动态组件组件，它可以在动态的选择加载那个组件。
例子：
模板
div class=home
img alt=Vue logo src=./assets/logo.png /
！- HelloWorld msg=欢迎使用您的vue . j应用/-
a href= # @ click= current= Hello-World Hello World/a
a href= # @ click= current= Hello-world 2 Hello 2/a
组件：is= current :msg= current @ clicked= handle clicked /组件
/div
/模板
脚本
//@是/src的别名
从导入你好，世界./components/hello world。vue ；
从导入HelloWorld2./components/hello world 2 ；
导出默认值{
姓名：家，
组件：{
HelloWorld，
HelloWorld2
},
data() {
返回{
当前："你好，世界"
};
},
方法：{
手柄已点击(e) {
警报(e)和：
}
}
};
在成分中：是属性是必须的，它的内容为在模板中使用的组件标签。通过：是内容的切换就可以动态的渲染和组件了。
改造组件
我的表单项目。某视频剪辑软件
成分
v-if=widgetType
:is=currentWidget
v-model=form[path]
v-bind=$props
:label=title
:property=mProperty
/组件
my-input.vue
模板
el-form-item :label=label
埃尔输入：value= value @ input= handle input /El输入
/El-表单-项目
/模板
my-select.vue
模板
el-form-item :label=label
El-select:value= value :clearable= true @ input= handle input
埃尔选项
v-for=小工具选项中的选项
:key=option.code
:label=option.name
:value=option.code
/el选项
/el-select
/El-表单-项目
/模板
这样投入和挑选就分解成了两个组件，每个组件只需要关注自己的逻辑即可。如果需要扩充新的组件，只要按照规范创建一个新的组件即可。
总结：动态组件可以将完成的道具传递给实际组件，也可以监控实际组件的Emit，这样就解决了参数传递的问题。使用动态组件可以实现开发体验上的零差异和代码处理逻辑上的解耦，就像使用实际的一样。
Vue动态组件的理解
什么是动态组件
让多个组件使用同一个挂载点，动态切换，这叫动态组件。
模板
差异
Div动态呈现组件/div
差异
//组件标签是挂载点，is=绑定组件的名称。
组件：is= current component /组件
/div
Button @click=btn_click()按钮/按钮
/div
/模板
脚本
从“@/components/Tab0.vue”导入Tab0
从“@/components/Tab1.vue”导入Tab1
导出默认值{
名称：“关于”，
data(){
返回{
当前索引：0
}
},
组件：{
Tab0，
表1
},
方法：{
btn_click(){
if(this.currentIndex==0){
this.currentIndex=1
}否则{
this.currentIndex=0
}
}
},
计算值：{
当前组件：函数(){
返回“Tab${this.currentIndex}”
}
}
}
/脚本
每次切换时，都会生成一个新组件。如果用keep-alive包装，可以提高性能，前提是项目大！相对提高性能。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。