带有 Props 的 Vue 总线事件仅执行一次

Question

我很难找到为什么事件总线在两个 Vue 组件之间只发出一次。

按钮交互是打开一个子组件的面板，然后动态/延迟加载一对图表组件。然后，在第二次执行时，关闭面板并销毁动态加载的组件。函数循环有效，但只有一次。

更新：

在<q-card> 指令中添加一些UI 组件后，我发现this.toggleChartPanel() 在每次与按钮事件交互时都会切换。看来道具仅在第一次单击按钮时加载。

非常感谢您提供带有解释的代码示例。

包含emit的组件：

<script>
import Store from '@store'
import BaseHrsBtn from './_base-hrs-btn'

export default {
  name: 'TotHrs',
  parent: 'LogSummaryWidget',

  components: {
    BaseHrsBtn,
  },

  data() {
    return {
      dynamicCharts: {
        dynamicChartA: 'test-line-chart',
        dynamicChartB: 'test-line-chart'
      }
    }
  },

  computed: {
    totHrs () {
      return Store.state.fetchLogSummary.data.total
    },
  },

  methods: {
    emitChartPanelToggle () {
      this.$bus.$emit('chart-panel-toggled', this.dynamicCharts)
      this.dynamicCharts = {}
    },
  },
}
</script>


<template>

  <base-hrs-btn
    class="col-6 col-md-4"
    :hours="totHrs"
    icon="clock"
    title="TOT"
    @click.native="emitChartPanelToggle"
  />

</template>

<script>
export default {
  name  : 'ChartPanel',
  parent: 'LogSummaryWidget',

  components: {
    TestLineChart: () => import("./_charts/test-line-chart"),
  },

  data () {
    return {
      chartPanelOpen: false,
      dynamicChartA: '',
      dynamicChartB: '',
    }
  },

  created() {
    this.$bus.$on('chart-panel-toggled', ({ dynamicChartA, dynamicChartB}) => {
      this.toggleChartPanel()
      this.dynamicChartA = dynamicChartA
      this.dynamicChartB = dynamicChartB
    });
  },

  beforeDestroy() {
    this.$bus.$off('chart-panel-toggled');
  },

  methods: {
    toggleChartPanel () {
      this.chartPanelOpen = !this.chartPanelOpen
    }
  },
}
</script>


<template>

  <q-card
    v-show-slide="chartPanelOpen"
    class="q-mx-md"
  >
    <component :is="dynamicChartA"></component>
    <component :is="dynamicChartB"></component>

  </q-card>

</template>

另外，我如何确保$bus.$on 也异步触发？

Answer 1

我不小心把这个留在了：

this.dynamicCharts = {}

删除它修复它。