vue获取不到组件模板引用

可能的原因

所绑定的组件位于v-for内，而不是直接循环组件。例如：

<div v-for="type in quarterWorksGroupByType" :key="type.typeID">
	<div class="work-table-title">
		<!-- code.. -->
	</div>
	<!-- 期望tableRefs是一个组件实例数组，但实际上获得的是null。因为没有在这个标签上写v-for，vue不会特殊处理 -->
	<quarter-work-table
	:ref="tableRefs"
	v-model:works="type.workViews"
	/>
	</div>

再回顾下官方文档即可发现，实例中是v-for了li，并在li上使用了ref属性：

当 ref 在 v-for 内部使用时，相应的 ref 应包含一个 Array 值，该值将在 mount 之后填充元素：

<script setup>
import { ref, useTemplateRef, onMounted } from 'vue'
 
const list = ref([
  /* ... */
])
 
// Declare array for the dynamic collection of refs
// CHANGED: The variable name can differ from the value of the Template element's ref attribute. ---> in my example itemRefs custom-name related to ref="items"
const itemRefs = useTemplateRef('items')
 
onMounted(() => console.log(itemRefs.value))
</script>
<template>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</template>

来源：v-for内的引用

解决方案

方法一：将v-for下放到与绑定了ref属性的组件/标签内

<quarter-work-table
	v-for="type in types" :key="type.typeID"
	:ref="tableRefs"
	v-model:works="type.workViews"
	/>

方法二：为ref绑定函数，自行维护ref数组

<script setup>
import { reactive } from 'vue'
 
const dynamicName = "inputDynamicRefName"
const inputs = reactive({})
 
const setTemplateRef = (key, el) => {
  inputs[key] = el
}
</script>
 
<template>
  <div>
    <input :ref="(el) => setTemplateRef(dynamicName, el)" />
  </div>
</template>

参考：函数模板引用