vue表单动态添加组件,vue动态生成自定义组件
这篇文章主要为大家详细介绍了某视频剪辑软件实现动态表单动态渲染组件的方式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
某视频剪辑软件实现动态表单/动态渲染组件的方式（一),供大家参考，具体内容如下
思路
先写好各个可能会出现的表单或者自定义的组件，引入。此时后端可能会给到一个对象型数组，每个对象有要渲染组件的一个类型标识利用组件是动态组件，根据不同的组件类型标识，渲染展示不同的组件在利用组件的数据通信去收集各个子组件的数据
实现demo
三个表单组件，用了element-ui
此处用了自定义组件的v型车来收集子组件的数据
//InputComponent.vue要渲染的子组件
模板
El-input:value= username @ input= input and ler /El-input
/模板
脚本
导出默认值{
名称："输入组件",
data() {
返回{
}
},
型号：{
道具："用户名",
事件："输入"
},
道具：{
用户名：字符串
},
方法：{
inputHandler(ev) {
console.log(ev)
这个$emit(输入，电动汽车)
}
}
}
/脚本
样式范围
/风格
//SwitchComponent.vue要渲染的子组件
模板
埃尔开关
：值="已检查"
active-color=#13ce66
inactive-color=#ff4949
@change=changeHandler
/el开关
/模板
脚本
导出默认值{
名称：开关组件，
data() {
返回{
}
},
型号：{
道具："已检查",
事件："更改"
},
道具：{
已检查：{
默认值：真
}
},
方法：{
changeHandler(ev) {
这个$emit(change ，ev)
}
}
}
/脚本
样式范围
/风格
//SelectComponent.vue要渲染的子组件
模板
El-select:value= role placeholder=请选择@change=changeHandler
埃尔选项
v-for=选项中的项目
:key=item.value
:label=item.label
:value=item.label
/el选项
/el-select
/模板
脚本
导出默认值{
名称：选择组件，
data () {
返回{
选项：[
{
值："1",
标签: 李世民
},
{
值："2",
标签: 嬴政
},
{
值："3",
标签: 刘邦
},
{
值："4",
标签: 项羽
},
{
值："5",
标签: 范蠡
}
],
值：""
}
},
型号：{
道具："角色",
事件："更改"
},
道具：{
角色：{
默认值：""
}
},
方法：{
changeHandler(ev) {
这个$emit(change ，ev)
}
}
}
/脚本
样式范围
/风格
主组件（父组件）
此处用了自定义组件的v型车来收集子组件的数据
//Main.vue父组件
模板
差异
el-form :model=formData
el-form-item v-for=(item，index)in formItemList :key= index :label= item。标签
成分
:is=item.type
v-model=formData[item.key]
/组件
/El-表单-项目
/el格式
/div
/模板
脚本
//引入三个表单组件
从导入输入组件./子组件/输入组件
从导入选择组件./子组件/选择组件
从""导入开关组件./子组件/开关组件
导出默认值{
名称：主，
data() {
返回{
//数据的类型值要与组件的名字对应
表单列表：[
{类型：开关组件，要求：真，标签:开关，键： isOpen }，
{类型： 输入组件，要求：真，标签:姓名，key: name }，
{类型： 选择组件，要求：真，标签:角色，键："角色"},
],
表单数据：{
}
}
},
组件：{
输入组件，
开关组件，
选择组件，
},
方法：{
}
}
/脚本
样式范围语言=少
/风格
某视频剪辑软件实现动态表单动态渲染组件的方式(2)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。