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

方案1：把组件方法挂载到window全局对象 #

在Vue组件里，把接收数据的方法挂到window上，让index.html里的culqi函数能直接调用传值，同时注意清理全局方法避免内存泄漏。

组件代码示例：

<script setup>
import { onUnmounted } from 'vue'

// 定义处理Culqi数据的方法
const handleCulqiData = (data) => {
  // 这里写你的业务逻辑，比如把token存到ref里
  console.log('拿到Culqi返回的数据:', data)
}

// 挂载到window，让全局可访问
window.handleCulqiData = handleCulqiData

// 组件卸载时清理全局方法，防止内存泄漏
onUnmounted(() => {
  delete window.handleCulqiData
})
</script>

index.html里的culqi函数：

<script>
function culqi() {
  // 假设这里通过Culqi SDK拿到了token/order数据
  const culqiResult = { token: 'culqi_xxx_token', orderId: 'ORD-12345' }
  
  // 调用组件暴露的全局方法传值
  if (window.handleCulqiData) {
    window.handleCulqiData(culqiResult)
  }
}
</script>

方案2：用事件总线实现跨环境通信 #

Vue3移除了内置事件总线，可以用mitt库自己实现一个，适合复杂场景下的组件通信。

1. 先创建事件总线实例（单独建个eventBus.js文件）：

import mitt from 'mitt'
export const emitter = mitt()

2. 在目标组件里监听事件：

<script setup>
import { onUnmounted } from 'vue'
import { emitter } from './eventBus.js'

const handleCulqiData = (data) => {
  console.log('通过事件总线收到数据:', data)
}

// 监听culqiData事件
emitter.on('culqiData', handleCulqiData)

// 组件卸载时取消监听
onUnmounted(() => {
  emitter.off('culqiData', handleCulqiData)
})
</script>

3. 在main.js里把事件总线挂载到window，让index.html能访问：

import { createApp } from 'vue'
import App from './App.vue'
import { emitter } from './eventBus.js'

const app = createApp(App)
window.emitter = emitter // 挂载到全局
app.mount('#app')

4. index.html里的culqi函数触发事件传值：

<script>
function culqi() {
  const culqiResult = { token: 'culqi_xxx_token', orderId: 'ORD-12345' }
  window.emitter.emit('culqiData', culqiResult)
}
</script>

方案3：通过组件ref直接调用方法 #

如果目标组件有全局可访问的ref，直接调用组件内部暴露的方法传值。

组件代码（比如Checkout.vue）：

<script setup>
import { ref } from 'vue'

const culqiToken = ref('')
const orderId = ref('')

// 定义接收数据的方法，并暴露给外部
const setCulqiData = (data) => {
  culqiToken.value = data.token
  orderId.value = data.orderId
}

defineExpose({ setCulqiData })
</script>

根组件（App.vue）里挂载组件ref到window：

<template>
  <CheckoutComponent ref="checkoutRef" />
</template>

<script setup>
import { ref } from 'vue'
import CheckoutComponent from './Checkout.vue'

const checkoutRef = ref(null)
window.checkoutRef = checkoutRef
</script>

index.html里的culqi函数：

<script>
function culqi() {
  const culqiResult = { token: 'culqi_xxx_token', orderId: 'ORD-12345' }
  
  // 调用组件暴露的方法传值
  if (window.checkoutRef?.value) {
    window.checkoutRef.value.setCulqiData(culqiResult)
  }
}
</script>

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