vuejs：刪除的子組件仍可以從父

Question

獲得事件消息我碰到這個問題在我的項目來了，我複製它在下面的演示： https://jsfiddle.net/baoqger/jeeh5ncp/

簡單地說，

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); 
    }, 
    }, 
}) 

我使用addItem方法將項添加到allData屬性，該屬性是一個列表。並且sendMessage發出事件，這將被子組件監聽。 showAll只是顯示allData列表的當前長度。

的子組件，它進入如下：

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); 
    }) 
    }, 
}) 

每個子組件可以通過點擊按鈕x被刪除。並且在created掛鉤中，設置事件監聽send-message。

HTML部分是如下：

<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> 

混亂的問題是，例如我添加3子組件。並點擊send Message按鈕，我可以得到0 1 2，這是預期的。但是如果我刪除一個子元素，並點擊send Message按鈕，仍然會得到0 1 2。但長度是2。那有什麼問題呢？

Answer 1

由於要設置在公交車的事件偵聽器，則需要在該組件被破壞，需要手動刪除監聽器：

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.