Nuxt 3中布局Qdrawer与Leaflet地图页面的父向子通信问题

方案1：路由条件绑定Props #

直接在布局文件中判断当前路由，仅给目标页面传递Props，避免影响其他页面。

在layouts/default.vue中：

<template>
  <div>
    <Qdrawer @menu-item-click="handleMenuItemClick">
      <!-- 你的菜单内容 -->
    </Qdrawer>
    <!-- 动态判断路由，仅给/map页面传props -->
    <NuxtPage 
      :props="route.path === '/map' ? { targetCoords } : {}" 
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const route = useRoute()

// 存储要跳转的坐标
const targetCoords = ref<[number, number] | null>(null)

// 处理抽屉菜单点击事件
const handleMenuItemClick = (coords: [number, number]) => {
  targetCoords.value = coords
}
</script>

在pages/map.vue中接收Props并处理：

<script setup lang="ts">
import { watch, onMounted } from 'vue'
import L from 'leaflet'

const props = defineProps<{
  targetCoords: [number, number] | null
}>()

const map = ref<L.Map | null>(null)

onMounted(() => {
  // 初始化地图
  map.value = L.map('map').setView([51.505, -0.09], 13)
})

// 监听坐标变化，触发地图跳转
watch(() => props.targetCoords, (newCoords) => {
  if (newCoords && map.value) {
    map.value.panTo(newCoords)
    // 可选：重置坐标，避免重复触发
  }
}, { deep: true })
</script>

方案2：使用Pinia状态管理（推荐） #

对于跨组件通信，尤其是复杂场景，Pinia是Nuxt3官方推荐的状态管理方案，能更清晰地管理共享状态。

步骤1：创建Pinia Store #

// stores/mapStore.ts
import { defineStore } from 'pinia'

export const useMapStore = defineStore('map', () => {
  // 存储目标坐标
  const targetCoords = ref<[number, number] | null>(null)

  // 设置坐标的方法
  const setTargetCoords = (coords: [number, number]) => {
    targetCoords.value = coords
  }

  // 重置坐标的方法
  const resetTargetCoords = () => {
    targetCoords.value = null
  }

  return { targetCoords, setTargetCoords, resetTargetCoords }
})

步骤2：在布局组件中触发状态更新 #

<!-- layouts/default.vue -->
<script setup lang="ts">
import { useMapStore } from '~/stores/mapStore'
const mapStore = useMapStore()

const handleMenuItemClick = (coords: [number, number]) => {
  // 更新目标坐标
  mapStore.setTargetCoords(coords)
}
</script>

步骤3：在地图页面监听状态变化 #

<!-- pages/map.vue -->
<script setup lang="ts">
import { useMapStore } from '~/stores/mapStore'
import { watch, onMounted } from 'vue'
import L from 'leaflet'

const mapStore = useMapStore()
const map = ref<L.Map | null>(null)

onMounted(() => {
  // 初始化地图
  map.value = L.map('map').setView([51.505, -0.09], 13)
})

// 监听坐标变化，执行地图跳转
watch(() => mapStore.targetCoords, (newCoords) => {
  if (newCoords && map.value) {
    map.value.panTo(newCoords)
    // 跳转后重置坐标，避免重复触发
    mapStore.resetTargetCoords()
  }
}, { immediate: false })
</script>

方案3：使用事件总线（简单场景） #

如果只是简单的一次性通信，可以用事件总线（比如mitt库）实现组件间的事件触发与监听。

步骤1：注册事件总线插件 #

// plugins/eventBus.ts
import mitt from 'mitt'

export default defineNuxtPlugin(() => {
  const emitter = mitt()
  return {
    provide: {
      eventBus: emitter
    }
  }
})

步骤2：在布局组件中触发事件 #

<!-- layouts/default.vue -->
<script setup lang="ts">
const { $eventBus } = useNuxtApp()

const handleMenuItemClick = (coords: [number, number]) => {
  // 触发地图跳转事件
  $eventBus.emit('map:jump-to-coords', coords)
}
</script>

步骤3：在地图页面监听事件 #

<!-- pages/map.vue -->
<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import L from 'leaflet'

const { $eventBus } = useNuxtApp()
const map = ref<L.Map | null>(null)

onMounted(() => {
  // 初始化地图
  map.value = L.map('map').setView([51.505, -0.09], 13)

  // 定义事件处理函数
  const handleJumpToCoords = (coords: [number, number]) => {
    if (map.value) {
      map.value.panTo(coords)
    }
  }

  // 监听事件
  $eventBus.on('map:jump-to-coords', handleJumpToCoords)

  // 页面卸载时移除监听，避免内存泄漏
  onUnmounted(() => {
    $eventBus.off('map:jump-to-coords', handleJumpToCoords)
  })
})
</script>

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