2
我正在建设以下场景。 Parent创建一个子组件的多个实例。每个孩子通过输入字段保存其数据。孩子可以要求被删除，父母会删除该实例。到现在为止还挺好。所以现在就是这个问题，一旦这个实例被移除，它的数据被传递/泄漏到下一个兄弟实例，并且如果该实例正在保存数据，它就会被移动到其他的next-to-it实例。我在这里重现它fiddle为什么数据泄露到兄弟组件的实例当删除vue 2
或见下文
Vue.component('child', {
\t props:['data'],
template: `
<div>
index# {{data}}: {{messages}}
<input type="text" v-model="text" @keypress.enter="addMessage" placeholder="add some data then delete it">
<button @click="addMessage">Add</button>
<button @click="$emit('delete-me')">Delete</button>
</div>`,
data() {
\t return {
\t messages:[],
text: ''
}
},
methods: {
\t addMessage() {
\t this.messages.push(this.text)
this.text = ''
}
}
})
Vue.component('parent', {
template: `
<div>
Keep Adding new Instances
<button @click="newChild">New</button>
<hr />
<child v-for="(child, index) in children" key="index"
v-on:delete-me="deleteThisRow(index)""
:data="child"
></child>
</div>`,
data() {
\t return {
\t children:[]
}
},
methods: {
\t newChild() {
\t this.children.push(this.children.length)
},
deleteThisRow(index) {
this.children.splice(index, 1);
}
}
})
new Vue({
el: '#app',
template: `
<div>
\t \t <parent />
</div>
`,
methods: {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app"></div>