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

Posted 2023-02-23

【中文标题】Vue.js - 具有动态组件的多个事件

【英文标题】：Vue.js - multiple event with dynamic components

【发布时间】：2017-12-19 14:24:57

【问题描述】：

我有一个简单的根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>

【参考方案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>