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 = {}

将其删除固定。

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

1 个答案: