正文
Vue组件:组件的动态添加与删除
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、实现效果
二、实现代码
HelloWorld.vue
<template>
<div class="hello">
<child-page v-for="(item,index) in items"
:key="index"
:index="index"
:items="items"
@deleteIndex="del"
@uploadData="getData">
</child-page>
<button @click="add">Add</button>
</div>
</template>
<script>
import ChildPage from './ChildPage'
export default {
data () {
return {
items: [{}],
dataRec: []
}
},
components: {
ChildPage
},
methods: {
// add student
add: function () {
this.items.push({name: '', age: ''})
},
// delete student
del: function (index) {
// not allow to delete the first
if (index !== 0) {
this.items.splice(index, 1)
console.log('deleted:', JSON.stringify(this.items))
}
},
// get the data from child
getData: function (val) {
let index = val.index
this.items[index] = val.data
console.log('I got the data:', JSON.stringify(this.items))
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
ChildPage.vue
<template>
<div class="hello">
<h1>Component:{{index}}</h1>
<p>Name:<input type="text" v-model="student.name" placeholder="Please enter name"></p>
<p>Age:<input type="text" v-model="student.age" placeholder="Please enter age"><button @click="deleteStudent">Delete</button></p>
</div>
</template>
<script>
export default {
props: {
index: {
type: Number,
required: true
},
items: {
type: Array,
default: Array
}
},
data () {
return {
student: {
name: '',
age: ''
}
}
},
watch: {
student: {
handler (newV, oldV) {
if (newV.name.length === 0) {
return false
}
if (newV.age.length === 0) {
return false
}
this.$emit('uploadData', {index: this.index, data: newV})
},
deep: true
},
items: {
handler (newV, oldV) {
if (newV.length !== 0) {
this.student = {...newV[this.index]}
}
},
deep: true
}
},
methods: {
deleteStudent: function () {
this.$emit('deleteIndex', this.index)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
