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已经尝试将其发射到事件总线之后初始化了该映射，所以该事件永远不会触发。什么是“等待”初始化地图然后将标记添加到地图的最佳方法。我虽然想在地图创建中添加待处理标记的“缓存”，但这似乎很笨拙。

示例：

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

Answer 1

好的，所以那里有个小鸡和鸡蛋的问题。您有一个元素需要通过引用进行更新（以某种方式将数据入侵到第三方插件中），但是在安装HTML之前就已经获得了数据。

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

我没有在上面回答您的问题，因为在您提供的codeandbox示例中该问题得到了简化。

这是基于此的解决方案：

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（）绑定到事件并设置一个变量，然后在安装DOM后使用该变量。

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

这绝对不是最优雅的解决方案，但绝对可以帮助您。

Vue事件总线正在等待安装

1 个答案: