Vue3插件+组合式API：如何在组件中调用全局翻译方法？

1. 模板中直接调用 #

因为你已经通过app.config.globalProperties注册了全局方法，在组件模板里可以直接使用$translate：

<template>
  <div>{{ $translate(yourTranslationsData, 'yourKey') }}</div>
</template>

2. <script setup>语法中调用 #

在<script setup>里没有直接的this，需要通过getCurrentInstance获取组件实例的代理来访问全局方法：

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

const { proxy } = getCurrentInstance()!

// 调用方法
const getTranslation = () => {
  return proxy?.$translate(yourTranslationsData, 'yourKey')
}
</script>

注意：getCurrentInstance只能在组件的setup函数或生命周期钩子中使用，不要在外部独立函数中调用。

3. 选项式API中调用 #

如果使用选项式API，直接通过this访问全局方法即可：

<script>
export default {
  methods: {
    getTranslation() {
      return this.$translate(this.yourTranslationsData, 'yourKey')
    }
  }
}
</script>

额外提示：插件代码的潜在问题 #

你的$translate方法里，find的回调参数存在变量覆盖问题：find((item, key) => { ... })里的key是数组的索引，会覆盖你传入的方法参数key。建议修改回调参数名，比如改成find((item, index) => { ... })，避免逻辑错误。

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