vue實(shí)現(xiàn)動(dòng)態(tài)表單動(dòng)態(tài)渲染組件的方式(1)

更新時(shí)間：2022年04月06日 15:00:16 作者：兮木兮木

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動(dòng)態(tài)表單動(dòng)態(tài)渲染組件的方式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue 實(shí)現(xiàn)動(dòng)態(tài)表單/動(dòng)態(tài)渲染組件的方式（一），供大家參考，具體內(nèi)容如下

思路

先寫好各個(gè)可能會(huì)出現(xiàn)的表單或者自定義的組件，引入。
此時(shí)后端可能會(huì)給到一個(gè)對(duì)象型數(shù)組，每個(gè)對(duì)象有要渲染組件的一個(gè)類型標(biāo)識(shí)
利用component is 動(dòng)態(tài)組件，根據(jù)不同的組件類型標(biāo)識(shí)，渲染展示不同的組件
在利用組件的數(shù)據(jù)通信去收集各個(gè)子組件的數(shù)據(jù)

實(shí)現(xiàn)demo

三個(gè)表單組件，用了element-ui

此處用了自定義組件的v-model來收集子組件的數(shù)據(jù)

//InputComponent.vue ?要渲染的子組件
<template>
? <el-input :value="username" @input="inputHandler"></el-input>
</template>

<script>
? export default {
? ? name: 'InputComponent',
? ? data() {
? ? ? return {

? ? ? }
? ? },
? ? model: {
? ? ? prop: 'username',
? ? ? event: 'input'
? ? },
? ? props: {
? ? ? username: String
? ? },
? ? methods: {
? ? ? inputHandler(ev) {
? ? ? ? console.log(ev)
? ? ? ? this.$emit('input', ev)
? ? ? }
? ? }
? }
</script>

<style scoped>

</style>

//SwitchComponent.vue ?要渲染的子組件
<template>
? <el-switch
? ? :value="checked"
? ? active-color="#13ce66"
? ? inactive-color="#ff4949"
? ? @change="changeHandler"
? >
? </el-switch>
</template>

<script>
? export default {
? ? name: 'SwitchComponent',
? ? data() {
? ? ? return {

? ? ? }
? ? },
? ? model: {
? ? ? prop: 'checked',
? ? ? event: 'change'
? ? },
? ? props: {
? ? ? checked: {
? ? ? ? default: true
? ? ? }
? ? },
? ? methods: {
? ? ? changeHandler(ev) {
? ? ? ? this.$emit('change', ev)
? ? ? }
? ? }
? }
</script>

<style scoped>

</style>

//SelectComponent.vue ?要渲染的子組件
<template>
? <el-select :value="role" placeholder="請(qǐng)選擇" @change="changeHandler">
? ? <el-option
? ? ? v-for="item in options"
? ? ? :key="item.value"
? ? ? :label="item.label"
? ? ? :value="item.label">
? ? </el-option>
? </el-select>
</template>

<script>
? export default {
? ? name: 'SelectComponent',
? ? data () {
? ? ? return {
? ? ? ? options: [
? ? ? ? ? {
? ? ? ? ? ? value: '1',
? ? ? ? ? ? label: '李世民'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? value: '2',
? ? ? ? ? ? label: '嬴政'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? value: '3',
? ? ? ? ? ? label: '劉邦'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? value: '4',
? ? ? ? ? ? label: '項(xiàng)羽'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? value: '5',
? ? ? ? ? ? label: '范蠡'
? ? ? ? ? }
? ? ? ? ],
? ? ? ? value: ''
? ? ? }
? ? },
? ? model: {
? ? ? prop: 'role',
? ? ? event: 'change'
? ? },
? ? props: {
? ? ? role: {
? ? ? ? default: ''
? ? ? }
? ? },
? ? methods: {
? ? ? changeHandler(ev) {
? ? ? ? this.$emit('change', ev)
? ? ? }
? ? }
? }
</script>

<style scoped>

</style>

主組件（父組件）

此處用了自定義組件的v-model來收集子組件的數(shù)據(jù)

//Main.vue ?父組件
<template>
? <div>
? ? ? <el-form :model="formData">
? ? ? ? <el-form-item v-for="(item, index) in formItemList" :key="index" :label="item.label">
? ? ? ? ? <component
? ? ? ? ? ? :is="item.type"
? ? ? ? ? ? v-model="formData[item.key]"
? ? ? ? ? >
? ? ? ? ? </component>
? ? ? ? </el-form-item>
? ? ? </el-form>
? </div>
</template>

<script>
//引入三個(gè)表單組件
? import InputComponent from './subComponents/InputComponent'
? import SelectComponent from './subComponents/SelectComponent'
? import SwitchComponent from './subComponents/SwitchComponent'

? export default {
? ? name: 'Main',
? ? data() {
? ? ? return {
? ? ? ? //數(shù)據(jù)的type值要與組件的名字對(duì)應(yīng) ?
? ? ? ? formItemList: [
? ? ? ? ? { type: 'switch-component', require: true, label: '開關(guān)', key: 'isOpen' },
? ? ? ? ? { type: 'input-component', require: true, label: '姓名', key: 'name' },
? ? ? ? ? { type: 'select-component', require: true, label: '角色', key: 'role' },
? ? ? ? ],
? ? ? ? formData: {

? ? ? ? }
? ? ? }
? ? },
? ? components: {
? ? ? InputComponent,
? ? ? SwitchComponent,
? ? ? SelectComponent,
? ? },
? ? methods: {

? ? }
? }
</script>

<style scoped lang="less">
??
</style>

vue實(shí)現(xiàn)動(dòng)態(tài)表單動(dòng)態(tài)渲染組件的方式(2)

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: