Vue.js -具有动态组件的多个事件

Question

我有一个简单的根App，它包含两个不同的组件Room和Machine。每个组件都包含一个组件Datatable，这两个组件都是完全相同的。为了在Room和Machine之间切换，我使用了动态组件机制，没有什么特别的。当组件发生变化时，我只会发出事件，组件Datatable应该用当前模块名将其记录在控制台中。问题是，每次我更改组件时，都会多次发送事件。如果我理解得对，在改变组件后，旧组件应该被销毁，新组件应该被创建，那么为什么会发生这种情况呢？我使用的是Vue.js v.2.4.1

当我在组件之间切换时，这里是来自控制台的屏幕快照：

​

以下是部分内容：

App.vue:

<template>
    <div id="app">
        <select style="padding: 10px" v-model="currentModule" @change="changeComponent">
            <option value="Room">Room</option>
            <option value="Machine">Machine</option>
        </select>
        <component :is="currentModule"></component>
    </div>
</template>

<script>
    import Room from './Room.vue';
    import Machine from './Machine.vue';


    export default {
        name: 'app',
        components: {
            Room,
            Machine
        },
        data () {
            return {
                currentModule: 'Room'
            }
        },
        methods: {
            changeComponent: function() {
                Event.$emit('moduleHasChanged', this.currentModule)
            }
        },
    }
</script>

Machine.vue:

<template>
    <div>
        Machine template

        <datatable></datatable>
    </div>
</template>
<script>
    import Datatable from './Datatable.vue';

    export default {
        components: {
            Datatable
        }
    }
</script>

Room.vue:

<template>
    <div>
        Room template

        <datatable></datatable>
    </div>
</template>
<script>
    import Datatable from './Datatable.vue';

    export default {
        components: {
            Datatable
        }
    }
</script>

Datatable.vue

<template>
    <div>
        Datatable
    </div>
</template>

<script>
    export default {
        created() {
            Event.$on('moduleHasChanged', (currentModule) => {
                console.log(currentModule);
            })
        }
    }
</script>

Answer 1

之所以会发生这种情况，是因为您一直在添加事件侦听器(在创建Datatable组件时)，并且从不删除它们。Vue通常会为您处理这个问题，但是由于您使用的是事件总线，所以您需要自己来处理。

只需添加一个beforeDestroy处理程序并删除事件处理程序即可。

​

console.clear()
const Event = new Vue()

const Datatable = {
  template: `
    <div>
      Datatable
    </div>
  `,
  methods: {
    moduleChanged(currentModule) {
      console.log(currentModule);
    }
  },
  created() {
    Event.$on('moduleHasChanged', this.moduleChanged)
  },
  beforeDestroy() {
    Event.$off('moduleHasChanged', this.moduleChanged)
  }
}

const Room = {
  template: `
    <div>
      Room template
      <datatable></datatable>
    </div>
  `,
  components: {
    Datatable
  }
}

const Machine = {
  template: `
    <div>
      Machine template
      <datatable></datatable>
    </div>
  `,
  components: {
    Datatable
  }
}

const App = {
  name: 'app',
  template: `
    <div id="app">
        <select style="padding: 10px" v-model="currentModule" @change="changeComponent">
            <option value="Room">Room</option>
            <option value="Machine">Machine</option>
        </select>
        <component :is="currentModule"></component>
    </div>
  `,
  components: {
    Room,
    Machine
  },
  data() {
    return {
      currentModule: 'Room'
    }
  },
  methods: {
    changeComponent: function() {
      Event.$emit('moduleHasChanged', this.currentModule)
    }
  },
}


new Vue({
  el: "#app",
  render: h => h(App)
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">

</div>

​