带有道具的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 = {}

将其删除修复。