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.

vuejs：删除的子组件仍然可以从父级获取事件消息

1 个答案: