使用useTemplateRef绑定组件时，绑定名与组件名相同会引发报错？

• 遇到的问题：用useTemplateRef绑定组件时，如果绑定的引用名称和组件本身的名字（比如byElInput）完全一致，子组件里的has检查会返回null并触发报错；但将引用名改为其他值，就不会出现报错情况。

问题根因 #

这是命名冲突导致的异常：当模板引用名称与组件名称重复时，框架在模板解析或组件实例初始化阶段，内部变量查找逻辑出现混淆，使得子组件内的has方法无法正确识别目标引用，最终返回null触发报错。

快速解决办法 #

直接避免模板引用名称与组件名称重复即可：

• 给模板引用设置一个差异化的名称，比如组件名为byElInput，可将引用命名为myInputRef或formInput这类独特名称
• 修改后的示例代码：

<template>
  <byElInput ref="myInputRef" />
</template>

<script setup>
import { useTemplateRef } from '@vueuse/core'
import byElInput from './components/byElInput.vue'

const myInputRef = useTemplateRef('myInputRef')
</script>

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