Vue中script setup语法下无法绑定HTML元素至外部store的ref的问题排查

你完全猜对了核心问题！在<script setup>语法中，导入的外部变量默认不会自动暴露给模板，这就是为什么你的绑定失败了。

具体原因拆解： #

• 常规setup()写法中，你通过return手动把elementRef挂载到了组件实例的渲染上下文，模板可以直接找到这个变量并完成绑定。
• 但在<script setup>里，只有你在顶层声明的变量/函数才会自动暴露给模板；导入的外部变量（比如从store.ts里导入的elementRef）是模块私有变量，模板根本访问不到它，所以<div ref="elementRef">实际上找不到对应的响应式Ref，自然绑定后value还是null。

修复方案（两种可选） #

方案1：将导入的Ref重新赋值给顶层变量

把导入的Ref赋值给一个在<script setup>顶层声明的变量，让模板能识别到它：

<template>
  <div ref="elementRef">
    <p>Child of ref</p>
  </div>
  <button @click="doSomeShit">Test</button>
</template>
<script setup lang="ts">
import { elementRef as storeElementRef } from './store/store'

// 声明顶层变量，让模板可以访问到
const elementRef = storeElementRef

const doSomeShit = () => {
  console.log(elementRef.value)
}
</script>

方案2：使用自定义函数手动绑定（更灵活）

如果你不想重命名变量，也可以通过Vue的onMounted钩子手动获取DOM元素并赋值给store里的Ref：

<template>
  <div ref="localElementRef">
    <p>Child of ref</p>
  </div>
  <button @click="doSomeShit">Test</button>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { elementRef } from './store/store'

const localElementRef = ref<HTMLElement | null>(null)

onMounted(() => {
  // 手动把本地Ref的值同步到store的Ref里
  elementRef.value = localElementRef.value
})

const doSomeShit = () => {
  console.log(elementRef.value)
}
</script>

额外：修复Store里的类型错误 #

你的store.ts里的Maybe接口定义有问题，会导致类型报错。正确的Maybe类型应该是这样的：

import { ref } from 'vue'

// 修正Maybe类型：定义为联合类型而不是接口
type Maybe<T> = T | null
export const elementRef = ref<Maybe<HTMLElement>>(null)

原来的接口写法interface Maybe<T> { T: T | null }不符合Ref的类型预期，因为Vue的Ref的value是单一值，不是一个包含T属性的对象。

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