Vue3组合式API中父组件事件触发后调用子组件方法的实现方案

一、直接通过ref获取组件实例（Vue2 this.$refs的替代方案） #

在Vue3组合式API中，你可以通过ref()函数创建响应式引用，替代Vue2的this.$refs获取目标组件实例，进而调用其方法。

实现步骤： #

1. 在模板中给目标组件添加ref属性
2. 在setup()中用ref(null)声明对应引用
3. 在事件触发时，通过引用的.value访问组件实例并调用方法（建议用可选链?.避免空值报错）

结合你的场景示例： #

假设要调用的目标组件是ChartControl，代码如下：

<template>
  <Vue3DraggableResizable class="chartApp" @resizing="handleResizing">
    <!-- 拖拽组件内容 -->
  </Vue3DraggableResizable>

  <!-- 目标组件，添加ref属性 -->
  <ChartControl ref="chartControlRef" />
</template>

<script setup>
import { ref } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import ChartControl from './ChartControl.vue'

// 声明目标组件的引用
const chartControlRef = ref(null)

const handleResizing = () => {
  console.log('resizing')
  // 调用目标组件的方法，可选链避免实例未挂载时报错
  chartControlRef.value?.refreshChart()
}
</script>

二、替代方案（当直接ref调用不适用时） #

如果组件层级较深、跨路由或耦合性要求低，可以选择以下方案：

1. 使用状态管理工具（Pinia/Vuex） #

通过全局状态的变化触发目标组件的方法，适合复杂场景下的组件通信。

示例（Pinia）：

• 定义状态store：

// stores/resizeStore.js
import { defineStore } from 'pinia'

export const useResizeStore = defineStore('resize', {
  state: () => ({
    resizeTrigger: 0 // 用数值变化触发监听
  }),
  actions: {
    triggerResize() {
      this.resizeTrigger++ // 修改状态值
    }
  }
})

• 在拖拽组件中触发状态更新：

<script setup>
import { useResizeStore } from '@/stores/resizeStore'

const resizeStore = useResizeStore()

const handleResizing = () => {
  resizeStore.triggerResize()
}
</script>

• 在目标组件中监听状态变化并执行方法：

<script setup>
import { watch } from 'vue'
import { useResizeStore } from '@/stores/resizeStore'

const resizeStore = useResizeStore()

// 监听状态变化
watch(() => resizeStore.resizeTrigger, () => {
  // 执行目标组件的方法
  refreshChart()
})

const refreshChart = () => {
  console.log('图表已刷新')
}
</script>

2. 使用事件总线（mitt库） #

Vue3移除了内置的事件总线，可使用第三方库mitt实现组件间的事件通信。

示例：

• 创建全局事件总线：

// utils/eventBus.js
import mitt from 'mitt'
export const eventBus = mitt()

• 在拖拽组件中触发事件：

<script setup>
import { eventBus } from '@/utils/eventBus'

const handleResizing = () => {
  // 触发自定义事件
  eventBus.emit('onResizing')
}
</script>

• 在目标组件中监听事件：

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { eventBus } from '@/utils/eventBus'

const refreshChart = () => {
  console.log('图表已刷新')
}

// 挂载时监听事件
onMounted(() => {
  eventBus.on('onResizing', refreshChart)
})

// 卸载时移除监听，避免内存泄漏
onUnmounted(() => {
  eventBus.off('onResizing', refreshChart)
})
</script>

3. 父子组件通过props+watch传递信号 #

如果是直接父子组件关系，可以通过父组件修改props，子组件监听props变化来执行方法。

示例：

• 父组件（包含拖拽组件和目标子组件）：

<template>
  <Vue3DraggableResizable class="chartApp" @resizing="handleResizing" />
  <ChartControl :shouldRefresh="refreshSignal" />
</template>

<script setup>
import { ref } from 'vue'

const refreshSignal = ref(false)

const handleResizing = () => {
  // 切换信号值触发子组件监听
  refreshSignal.value = !refreshSignal.value
}
</script>

• 子组件：

<script setup>
import { watch } from 'vue'

const props = defineProps(['shouldRefresh'])

watch(() => props.shouldRefresh, (newVal) => {
  if (newVal) {
    refreshChart()
  }
})

const refreshChart = () => {
  console.log('图表已刷新')
}
</script>

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