vue~封装一个文本框添加与删除的组件

标签组件的效果如下

组件作用

• 这是一个div，包含了两个文本框，后面是添加和删除按钮
• 添加按钮复制出新的div，除了文本框没有内容，其它都上面一样
• 删除按钮将当前行div删除

组件实现

  
                                                                                添加          |          删除                    export default {  name: "AuthorUnit",  props: {dic: {type: Array, default: []}},  data() {    return {      tags: [],    };  }, created() {    if(this.dic!=null && this.dic.length>0){      this.tags = this.dic;//关键字初始化，dic的值来自于父组件（调用它的组件叫父组件）    }  },  methods: {    addAuthor() {      this.tags.push({authorName: '', authorUnit: ''});    },    delAuthor(index) {      this.tags.splice(index, 1);    },  },}

调用组件，为组件传默认值

测试代码

提交之后，将出现当前你添加的这个列表的对象，对接后端接口，将这个数组POST到后端即可，如图所示：

作者：仓储大叔，张占岭，
荣誉：微软MVP
QQ：853066980

支付宝扫一扫，为大叔打赏!