vue3 作用域插槽下不能通过ref获取多个实例的坑

Vue3 作用域插槽下使用组件不能通过 ref 获取多个的坑

在 Vue3 中，作用域插槽与 ref 结合使用时确实存在一些需要注意的问题，特别是当需要获取多个组件实例时。下面我将分析这个问题并提供解决方案。

问题分析

在 Vue3 中，当在作用域插槽中使用组件并尝试通过 ref 获取多个实例时，可能会遇到以下情况：

1. ref 只能获取到最后一个组件的实例
2. 无法通过数组方式获取所有组件实例
3. 响应式更新问题

解决方案

• 使用函数 ref

:ref="el => setChildRef(el, index)"

使用 provide/inject 或者emit事件 传递 ref 到父级收集

provide('collectChildRef', (el, index) => {
  if (el) {
    collectedRefs.value[index] = el
  } else {
    delete collectedRefs.value[index]
  }
})

• 使用模板引用数组（Vue 3.2.25+）

:ref="childRefs"
// 使用 ref 数组
const childRefs = ref([])

解决方案是问AI的，但没实际测试，先遇到这个问题纪录一下，后面有空测试。