javascript - Vue 事件总线等待挂载

Question

我有一个 Map 组件，它在 DOM 上初始化传单，如下所示:

Map.vue

<template>
  <div ref="map"/>
<template>
<script>
import * as L from 'leaflet';
import mapEventBus from '../event-buses/map.vue';

export default {
  mounted(){
    const map = L.map(this.$refs.map);
    mapEventBus.$on('add-marker',(newMarker) => {
      newMarker.addTo(map);
    });
  }
}
</script>

然后我有另一个组件需要添加一个基于组件创建构建的标记。

OtherComponent.vue

<template>
  <div/>
</template>
<script>
import mapEventBus from '../event-buses/map.vue';
export default {
  created(){
    mapEventBus.$emit('add-marker',L.marker([51.5, -0.09]));
  }
}
</script>

因为映射是在 OtherComponent 已经尝试发送到事件总线之后初始化的，所以该事件永远不会被触发。 “等待” map 初始化然后将标记添加到 map 的最佳方法是什么。我想在 map 创建时添加一个待处理标记的“缓存”，但这看起来很笨重。

示例:

https://codesandbox.io/s/2ov71xnz3r

Answer 1

好的，所以你遇到了先有鸡还是先有蛋的问题。您有一个需要通过 refs 更新的元素(将数据侵入到第 3 方插件的某种方式)，但您在挂载 HTML 之前获取了数据。

您需要做的是将立即捕获分离到数据变量中，然后在挂载时检查它是否存在，如果存在则更新 HTML 元素。

我不会回答您上面的问题，因为问题在您提供的codesandbox示例中得到了简化。

这是基于此的解决方案:

https://codesandbox.io/s/3rnyp31n4p

<script>
import { EventBus } from '../eventBus.js'

export default {
  data: () => ({
    immediateMessage: null
  }),
  beforeCreate() {
    EventBus.$on("immediate-message", message => {
      this.immediateMessage = message;
    });
  },
  mounted() {
    if (this.immediateMessage) {
      this.$refs.immediateMessageEl.innerHTML += this.immediateMessage;
    }
    EventBus.$on("delayed-message", message => {
      this.$refs.delayedMessageEl.innerHTML += message;
    });
  }
};
</script>

注意，beforeCreate() 绑定(bind)到事件并设置一个变量，然后我们在挂载 DOM 后使用该变量。

查看生命周期 Hook 页面以获取更多信息 https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

这绝对不是最优雅的解决方案，但绝对能让您继续前进。