Vue 3 中，如果 public 目录下的 .js 文件中有一个函数执行后生成数据，并希望将这些数据传递到组件中

本文链接：https://blog.youkuaiyun.com/qq_40287084/article/details/145933801

在 Vue 3 中，如果 public 目录下的 .js 文件中有一个函数执行后生成数据，并希望将这些数据传递到组件中，可以使用 window.postMessage，但需要结合具体场景。以下是不同方法的详细说明：

方法 1：使用 window.postMessage（跨窗口/跨域通信）

window.postMessage 主要用于跨窗口通信（例如与 iframe 或新打开的窗口）或跨域通信。如果数据来自外部窗口或需要跨域传递，可以用此方法。
实现步骤：

在 public 的 .js 文件中发送数据
假设 public/js/data.js 中有一个函数生成数据后发送消息：

// public/js/data.js
function generateData() {
  const data = [1, 2, 3, 4, 5];
  // 发送消息到父窗口（假设此脚本在 iframe 中运行）
  window.parent.postMessage({ type: 'DATA_UPDATE', payload: data }, '*');
}
generateData();

在 Vue 组件中监听消息

<script>
export default {
  data() {
    return {
      receivedData: []
    };
  },
  mounted() {
    window.addEventListener('message', this.handleMessage);
  },
  beforeUnmount() {
    window.removeEventListener('message', this.handleMessage);
  },
  methods: {
    handleMessage(event) {
      // 验证来源（避免安全风险）
      // if (event.origin !== '期望的域名') return;
      if (event.data.type === 'DATA_UPDATE') {
        this.receivedData = event.data.payload;
      }
    }
  }
};
</script>

适用场景
数据来自 iframe 或新窗口。
需要跨域通信（需严格验证 event.origin）。

方法 2：直接触发全局事件（同一窗口）

如果数据在同一窗口内生成，可以通过自定义事件或全局变量直接传递，无需 postMessage。
实现步骤：

在 public 的 .js 文件中触发事件

// public/js/data.js
function generateData() {
  const data = [1, 2, 3, 4, 5];
  // 触发自定义事件
  const event = new CustomEvent('DATA_READY', { detail: data });
  window.dispatchEvent(event);
}
generateData();

在 Vue 组件中监听事件

<script>
export default {
  data() {
    return {
      receivedData: []
    };
  },
  mounted() {
    window.addEventListener('DATA_READY', this.handleDataReady);
  },
  beforeUnmount() {
    window.removeEventListener('DATA_READY', this.handleDataReady);
  },
  methods: {
    handleDataReady(event) {
      this.receivedData = event.detail;
    }
  }
};
</script>

优点
无需跨窗口，直接在同一页面通信。

代码更简洁，无需处理跨域安全。

方法 3：通过全局变量直接访问（最简单）

如果数据生成后可以直接挂载到全局对象：

在 public 的 .js 中暴露数据

// public/js/data.js
function generateData() {
  window.publicData = [1, 2, 3, 4, 5];
}
generateData();

在组件中直接访问

<script>
export default {
  data() {
    return {
      localData: window.publicData || []
    };
  }
};
</script>

方法 4：动态执行函数（适用于非模块化脚本）

如果数据是通过函数动态生成的，可以通过 eval 或 Function 执行脚本并提取数据：

<script>
export default {
  data() {
    return {
      localData: []
    };
  },
  async mounted() {
    const response = await fetch(`${import.meta.env.BASE_URL}js/data.js`);
    const scriptText = await response.text();
    // 动态执行脚本并获取数据
    const getData = new Function(`
      ${scriptText}
      return generateData(); // 假设 generateData() 返回数据
    `);
    this.localData = getData();
  }
};
</script>