Vue拆分模板与代码后Ref失效问题求助

问题核心：拆分后的.ts文件中的ref变量未被暴露到组件的模板上下文，导致模板无法读取该变量。

修改步骤： #

1. 调整map.component.ts，导出目标变量
   将变量声明改为导出形式，让组件可以导入并使用：

   import { ref } from 'vue';
   export const mapUrl = ref('');
   mapUrl.value = 'https://myUrl/myImg.png';
   

2. 修改map.component.vue的<script setup>，导入并关联变量
   在<script setup>中导入mapUrl，此时变量会自动纳入组件作用域，模板即可直接访问：

   <script setup lang="ts">
   import { mapUrl } from './map.component.ts';
   </script>
   
   <template src="./map.component.html"></template>
   

原理说明： #

• <script setup>是编译时语法，作用域为组件私有，只有在该作用域内可访问的变量，才能被模板读取。
• 原写法仅导入了.ts文件，但未将变量引入组件上下文，因此模板无法识别mapUrl。

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