Vue 組件的動態添加與刪除

一、場景：做表單的過程中遇到聯系人、工作經歷等可能不止一項，這時候就需要組件的動態添加與刪除，以下就是組件添加與刪除的一個簡單實現。

二、實現代碼

　　index.vue

<template>
    <section>
        <button @click="add()">點擊添加</button>
        <hr/>
        <my-test v-for="(item, index) in people"
            :key="index"
            :index="index"
            :itemC="item"
            @deleteIndex="del"
        ></my-test>
        <button @click="confirm()">確定</button>
    </section>
</template>
<script>
import MyTest from './myTest.vue';

export default {
    components: {
        MyTest
    },
    data() {
        return {
            people: [{ name: '', phone: '', sex: '' }]
        };
    },
    methods: {
        add() {
            this.people.push({ name: '', phone: '', sex: '' });
        },
        del(val) {
            if (val !== 0) {
                this.people.splice(val, 1);
            }
        },
        confirm() {
            console.log(this.people);
        },
    }
};
</script>
<style lang="scss" scoped></style>

　　myTest.vue

<template>
    <section class="home">
        <div>聯系人{{index+1}}</div><br/>
        <span>姓名：</span>
        <input type="text" v-model="itemC.name" placeholder="請輸入姓名" /><br/>
        <span>年齡：</span>
        <input type="text" v-model="itemC.phone" placeholder="請輸入電話" /><br/>
        <span>性別：</span>
        <div class="sex" v-for="(el,idx) in sexType" :key="idx" @click="sexC(el)">
            <i :class="{choose: el.isSelected}"></i>
            <p>{{el.name}}</p>
        </div>
        <button @click="deleteP">刪除</button>
        <hr/>
    </section>
</template>
<script>
export default {
    props: {
        itemC: {
            type: Object,
            default() {
                return {};
            }
        },
        index: {
            type: Number,
            required: true
        },
    },
    data() {
        return {
            sexType: [{ id: 0, name: '男', isSelected: false }, { id: 1, name: '女', isSelected: false }],
            choose: 'choose',
        };
    },
    methods: {
        deleteP() {
            this.$emit('deleteIndex', this.index);
        },
        sexC(val) {
            if (val.isSelected === false) {
                val.isSelected = true;
                this.sexType.forEach((el) => {
                    if (el.id !== val.id) {
                        el.isSelected = false;
                    }
                });
            } else {
                val.isSelected = false;
            }
            this.itemC.sex = val.name;
        }
    }
};
</script>
<style lang="scss" scoped>
.home {
    input {
        border: 1px solid #ccc;
    }
    .sex {
        display: flex;
        i {
            width: 16px;
            height: 16px;
            border-radius: 8px;
            border: 1px solid #ccc;
        }
        .choose {
            background: orange;
        }
    }
}
</style>