vuejs: entfernte untergeordnete Komponente noch Ereignismeldung von den Eltern

Question

stieß ich auf dieses Problem in meinem Projekt bekommen, und ich reproduzieren es in der folgenden Demo: https://jsfiddle.net/baoqger/jeeh5ncp/

Kurz gesagt,

var demo = new Vue({ 
    el: '#demo', 
    data: { 
    newitem: '', 
    allData: [], 
    }, 
    methods: { 
    addItem() { 
     this.allData.push(this.newitem); 
    }, 
    sendMessage() { 
     Bus.$emit('send-message'); 
    }, 
    showAll() { 
     console.log(this.allData.length); 
    }, 
    }, 
}) 

I Verwenden Sie die Methode addItem, um der allData-Eigenschaft, die eine Liste ist, ein Element hinzuzufügen. Und sendMessage zu emittieren Ereignis, das von Kind-Komponente angehört wird. Die showAll zeigt einfach die aktuelle Länge der allData-Liste.

für das Kind Komponente, geht es wie folgt:

Vue.component('service', { 
    template: '<div>' + 
    '<span>{{serviceName}}</span>' + 
    '<button @click="remove">X</button>' + 
    '</div>', 
    props: ['serviceName', 'index'], 
    methods: { 
    remove() { 
     this.$emit('remove'); 
    }, 
    }, 
    created() { 
    Bus.$on('send-message',() => { 
     console.log(this.index); 
    }) 
    }, 
}) 

kann jedes Kind Komponente durch klicken Sie auf die Schaltfläche x entfernt werden. Und in der created Hook, richten Sie das Ereignis für send-message.

die HTML-Teil ist, wie folgend:

<div id="demo"> 
    <input v-model="newitem"> 
    <button @click="addItem">Add</button> 
    <button @click="sendMessage">Send Message</button> 
    <button @click="showAll">Show</button> 
    <service v-for="(each, index) in allData" :service-name="each" @remove="allData.splice(index,1)" :index="index"></service> 
</div> 

Der verwirrende Punkt ist, zum Beispiel I 3 Kind-Komponente hinzufügen. Und klicken Sie auf die Schaltfläche send Message, ich kann 0 1 2 erhalten, was erwartet wird. Aber wenn ich ein untergeordnetes Element entferne und auf die Schaltfläche send Message klicke, bekomme ich immer noch 0 1 2. Aber die Länge ist 2. Was ist daran falsch?

Answer 1

Da Sie ein Ereignis-Listener auf dem Bus setzen, müssen Sie manuell den Hörer entfernen, wenn das Bauteil zerstört wird:

methods: { 
    remove() { 
    this.$emit('remove'); 
    }, 
    logIndex() { 
    console.log(this.index) 
    } 
}, 
created() { 
    Bus.$on('send-message', this.logIndex) 
}, 
destroyed() { 
    Bus.$off('send-message', this.logIndex) 
} 

Here's a working fiddle.