一、场景:做表单的过程中遇到联系人、工作经历等可能不止一项,这时候就需要组件的动态添加与删除,以下就是组件添加与删除的一个简单实现。
二、实现代码
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>