Question

我正在构建以下场景。 Parent创建子组件的多个实例。每个孩子通过输入字段保存其数据。孩子可以要求删除，父母删除该实例。到现在为止还挺好。所以现在是问题，一旦删除该实例，其数据就会被传递/泄漏到下一个兄弟实例，如果该实例持有数据，它将被移动到其他下一个实例。我已在fiddle

上复制了它

或见下文

    Vue.component('child', {
    	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() {
            	return {
              	messages:[],
                text: ''
              }
            },
            methods: {
            	addMessage() {
              	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() {
            	return {
              	children:[]
              }
        },
        methods: {
        	newChild() {
          	this.children.push(this.children.length)
          },
          deleteThisRow(index) {
                this.children.splice(index, 1);
            }
        }
    })
    
    new Vue({
        el: '#app',
        template: `
            <div>
            		<parent />
                
            </div>
        `,
        
        methods: {
            
        }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app"></div>

Answer 1

这里有两个错误：

:key代替key

原因：由于动态值可能会发生变化，因此Vue应该知道该变更保持自己更新

孩子而不是index

原因：对此不确定但可能是因为Vue已经在Virtual DOM中拥有自己的索引副本，所以它只需要值

删除vue 2后，为什么数据会泄漏到兄弟组件实例中

1 个答案: