Vue父传子插槽时Map容器元素找不到问题求助

核心原因 #

你遇到的Map container element not found错误，根本原因不是插槽渲染速度慢，而是插槽名称不匹配导致内容从未被渲染：

• 子组件中向MapTileComponent传递了名为map2的插槽，但MapTileComponent的模板里只定义了名为map的插槽，所以<div id="map-google">从未被挂载到DOM中，自然找不到。
• 代码中还存在几处语法/逻辑错误，会导致后续功能异常。

修复步骤 #

1. 修正插槽名称匹配 #

将子组件中的插槽名称改为map，和MapTileComponent定义的插槽一致：

<!-- 子组件模板修改 -->
<template>
  <MapTileComponent
    title="Google Maps"
    @update:address="onAddressChanged"
    @update:route="onRouteChanged"
    @update:coordinates="onCoordinatesChanged"
  >
    <template #info>
      <title>Add Map</title>
    </template>
    <!-- 把#map2改成#map -->
    <template #map>
      <!-- 给div加ref，替代ID获取 -->
      <div ref="mapGoogle"></div>
    </template>
  </MapTileComponent>
</template>

2. 用Vue Ref替代document.getElementById #

避免全局ID冲突，同时更可靠地获取组件内的DOM元素：

<script setup lang="ts">
// ... 其他代码
const mapGoogle = ref<HTMLDivElement | null>(null);

onMounted(() => {
  nextTick().then(() => {
    // 用ref获取元素，替代document.getElementById
    const mapElement = mapGoogle.value;
    if (mapElement) {
      loader
        .load()
        .then((google) => {
          // ... 地图初始化代码不变
        })
        .catch((error) => {
          console.error("Error loading Google Maps API:", error);
        });
    } else {
      console.error("Map container element not found.");
    }
  });
});
// ... 其他代码
</script>

3. 修复代码中的其他错误 #

• 拼写错误：fetCoordsByCoordindates改为fetchCoordsByCoordinates
• 地理编码API参数错误：逗号运算符导致只传递了第二个坐标，修正为：

// 原错误代码
`https://maps.googleapis.com/maps/api/geocode/json?latlng=${(coordinates[0], coordinates[1])}&key=${apiKey}`

// 修正后
`https://maps.googleapis.com/maps/api/geocode/json?latlng=${coordinates[0]},${coordinates[1]}&key=${apiKey}`

4. 可选：监听插槽内容变化（复杂场景） #

如果插槽内容是动态条件渲染的，可以使用watch监听ref的变化，确保元素存在后再初始化地图：

watch(mapGoogle, (newElement) => {
  if (newElement && !googleMap.value) {
    // 初始化地图逻辑
    loader.load().then((google) => {
      // ...
    });
  }
}, { immediate: true });

额外优化建议 #

• 不要使用全局ID（如map-google），如果多个地图组件实例存在，会导致ID冲突，Vue的ref是组件级别的，更安全。
• 将地图初始化逻辑封装成独立的函数，代码更清晰。
• 处理地图初始化失败后的降级逻辑，比如显示提示信息。

内容的提问来源于stack exchange，提问作者Audiosleef