Vue.js循环生成组件时，不依赖refs触发子组件事件的优雅方案

针对循环生成的父子组件对，要实现ParentComponent事件触发对应ChildComponent事件，且不使用Ref和provide/inject，推荐两种基于Vue原生能力的优雅方案：

方案一：状态驱动的Props传递 #

通过父级容器维护每个子组件对的触发状态，利用Props传递信号，结合响应式监听实现事件触发，完全遵循Vue响应式机制：

1. 循环容器组件 #

<template>
  <ParentComponent 
    v-for="(item, index) in 777" 
    :key="index"
    @trigger-child="handleTriggerChild(index, $event)"
  >
    <ChildComponent 
      :trigger-signal="triggerMap[index]"
      @signal-handled="resetTriggerSignal(index)"
    />
  </ParentComponent>
</template>

<script setup>
import { ref } from 'vue'
// 维护每个子组件对的触发信号，key为循环索引，value为事件类型
const triggerMap = ref({})

// 接收ParentComponent的触发请求，更新对应Child的信号
const handleTriggerChild = (index, eventType) => {
  triggerMap.value[index] = eventType
}

// 接收Child处理完成的通知，重置信号避免重复触发
const resetTriggerSignal = (index) => {
  triggerMap.value[index] = null
}
</script>

2. ParentComponent 实现 #

<template>
  <div class="parent">
    <!-- 示例触发按钮 -->
    <button @click="emitTriggerEvent">触发Child事件</button>
    <slot></slot>
  </div>
</template>

<script setup>
const emit = defineEmits(['trigger-child'])

// 内部事件触发时，向容器组件发送触发指令
const emitTriggerEvent = () => {
  emit('trigger-child', 'targetEvent') // 可传递具体事件类型区分不同逻辑
}
</script>

3. ChildComponent 实现 #

<template>
  <div class="child">Child 内容</div>
</template>

<script setup>
import { watch } from 'vue'
const props = defineProps(['triggerSignal'])
const emit = defineEmits(['signal-handled'])

// 监听触发信号变化，执行对应事件逻辑
watch(() => props.triggerSignal, (eventType) => {
  if (eventType === 'targetEvent') {
    executeTargetEvent()
    emit('signal-handled')
  }
})

// Child内部的目标事件逻辑
const executeTargetEvent = () => {
  console.log('Child对应事件已触发')
  // 这里写具体业务逻辑
}
</script>

方案二：作用域插槽传递回调 #

通过ParentComponent的作用域插槽暴露触发回调，ChildComponent主动注册自身方法，实现直接调用，逻辑更紧凑：

1. 循环容器组件 #

<template>
  <ParentComponent v-for="(item, index) in 777" :key="index">
    <!-- 通过作用域插槽接收Parent提供的触发入口 -->
    <template #default="{ triggerChild }">
      <ChildComponent :register-handler="triggerChild" />
    </template>
  </ParentComponent>
</template>

2. ParentComponent 实现 #

<template>
  <div class="parent">
    <button @click="triggerRegisteredHandler">触发Child事件</button>
    <!-- 暴露触发回调给插槽 -->
    <slot :triggerChild="registerChildHandler"></slot>
  </div>
</template>

<script setup>
let childHandler = null

// 接收Child注册的方法
const registerChildHandler = (handler) => {
  childHandler = handler
}

// 内部事件触发时，直接调用Child注册的方法
const triggerRegisteredHandler = () => {
  childHandler?.()
}
</script>

3. ChildComponent 实现 #

<template>
  <div class="child">Child 内容</div>
</template>

<script setup>
import { onMounted } from 'vue'
const props = defineProps(['registerHandler'])

// 挂载时向Parent注册自身的目标方法
onMounted(() => {
  props.registerHandler(executeTargetEvent)
})

const executeTargetEvent = () => {
  console.log('Child对应事件已触发')
  // 具体业务逻辑
}
</script>

方案优势 #

两种方案均基于Vue原生组件通信能力：

• 完全规避Ref操作组件实例、provide/inject跨层级依赖的问题
• 循环场景下每个Parent-Child对独立维护状态/回调，不会出现干扰
• 符合Vue响应式/组件化设计思想，代码可维护性强

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