vue3模板动态ref使用，获取子组件元素

vue3模板动态ref使用，获取子组件元素

背景

我们在平时做业务的时候，父子组件通信会经常用到ref（我比较喜欢用这个方式，传值方便，省去一堆的watch或者computed）
当我们在列表调用子组件的时候，就会用到动态ref。比如：

我点击计划任务，每一行的计划任务点开都使用的同一个组件popover，如果如果我们模板使用同一个ref，即：

 <TaskPopover ref="taskref" >
  <template #content>
    <span @click="showTaskPopover(record.instance_id)"><i class="iconfont" :class="record.task_id ? 'icon-task-check' : 'icon-task'"/></span>
  </template>
</TaskPopover>
<script setup>
  const taskref = ref()
  const showTaskPopover = (id) => {
    taskref.value.show(id)
  }
</script>

这样调用，可以打开popover，但是很多时候，点击的和打开的不是同一个。这个时候，就需要我们将每一个ref都唯一，这个时候，我们就会用到动态ref.

动态组件的使用

<TaskPopover :name="record.instance_id" :ref="getTaskRef">
  <template #content>
    <span @click="showTaskPopover(record.instance_id)"><i class="iconfont" :class="record.task_id ? 'icon-task-check' : 'icon-task'"/></span>
  </template>
</TaskPopover>
<script setup>
  const startRef = reactive({})
  const getTaskRef = (el) => {
    if ((el && el.$attrs['name'] >= 0) || (el && el.$attrs['name'])) {
      startRef[el.$attrs['name']] = el
    }
  }
  const showTaskPopover = (id) => {
    startRef[id].show();
  }
</script>