如何将外部JS文件的数据传递至Vue 3组件？

同步函数场景 #

如果外部JS函数是同步返回数据的，直接导入后调用就能拿到结果。

示例：

1. 外部JS文件（比如utils/dataFetcher.js）：

export function getSyncData() {
  return {
    name: "示例数据",
    value: 123
  };
}

2. Vue组件中使用：

<script setup>
// 导入外部函数
import { getSyncData } from '../utils/dataFetcher.js';

// 直接调用获取数据
const data = getSyncData();
console.log(data); // 立刻拿到返回值
</script>

异步函数场景 #

如果外部函数是异步的（比如需要请求接口、等待定时器），得用异步方式处理：

情况1：函数返回Promise

外部JS文件：

export function getAsyncData() {
  return new Promise((resolve) => {
    // 模拟异步操作，比如API请求
    setTimeout(() => {
      resolve({
        name: "异步示例数据",
        value: 456
      });
    }, 1000);
  });
}

Vue组件中使用：

<script setup>
import { getAsyncData } from '../utils/dataFetcher.js';
import { ref, onMounted } from 'vue';

const asyncData = ref(null);

onMounted(async () => {
  // 用async/await处理异步逻辑
  asyncData.value = await getAsyncData();
  console.log(asyncData.value);
});
</script>

<template>
  <div v-if="asyncData">
    {{ asyncData.name }}: {{ asyncData.value }}
  </div>
  <div v-else>加载中...</div>
</template>

情况2：函数基于回调返回数据

外部JS文件：

export function getCallbackData(callback) {
  setTimeout(() => {
    callback(null, {
      name: "回调示例数据",
      value: 789
    });
  }, 1000);
}

Vue组件中使用：

<script setup>
import { getCallbackData } from '../utils/dataFetcher.js';
import { ref, onMounted } from 'vue';

const callbackData = ref(null);

onMounted(() => {
  getCallbackData((err, data) => {
    if (!err) {
      callbackData.value = data;
      console.log(callbackData.value);
    }
  });
});
</script>

全局挂载的外部函数场景 #

如果外部JS是通过<script>标签直接引入到HTML里，函数挂在window对象上，直接调用window.xxx就行：

示例：
HTML中引入外部JS：

<script src="./js/globalDataFetcher.js"></script>

外部JS文件：

window.getGlobalData = function() {
  return {
    name: "全局数据",
    value: 101112
  };
};

Vue组件中使用：

<script setup>
import { ref, onMounted } from 'vue';

const globalData = ref(null);

onMounted(() => {
  globalData.value = window.getGlobalData();
  console.log(globalData.value);
});
</script>

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