如何在Vue的Prop中使用I18N-Vue实现变量多语言翻译？

一、基础用法：单个Prop的翻译 #

1. 先定义i18n翻译资源文件，示例如下：

   • src/locales/en.json：

     {
       "greeting": "Hello",
       "welcome": "Welcome to our app"
     }
     

   • src/locales/zh.json：

     {
       "greeting": "你好",
       "welcome": "欢迎来到我们的应用"
     }
     

2. 组件接收翻译key作为Prop，通过vue-i18n的t函数渲染翻译内容：

   • Options API写法：

     <template>
       <div>{{ $t(translationKey) }}</div>
     </template>
     
     <script>
     export default {
       props: {
         translationKey: {
           type: String,
           required: true
         }
       }
     }
     </script>
     

   • Composition API写法：

     <template>
       <div>{{ t(translationKey) }}</div>
     </template>
     
     <script setup>
     import { useI18n } from 'vue-i18n'
     const { t } = useI18n()
     
     const props = defineProps({
       translationKey: {
         type: String,
         required: true
       }
     })
     </script>
     

3. 父组件传递翻译key：

   <template>
     <MyComponent translationKey="greeting" />
   </template>
   

二、数组类型Prop的翻译处理 #

给数组每个项分配唯一id，同时将翻译key作为项的属性，既可以区分不同项，又能准确对应翻译内容：

1. 定义数组项结构 #

父组件传递的数组格式示例：

const items = [
  { id: 1, textKey: 'greeting' },
  { id: 2, textKey: 'welcome' },
  { id: 3, textKey: 'logout' }
]

2. 子组件接收并渲染翻译 #

• Options API写法：

  <template>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ $t(item.textKey) }}
        <!-- 如需修改，通过emit通知父组件，不要直接修改Prop -->
        <button @click="$emit('update-item', item.id, 'new-text-key')">修改</button>
      </li>
    </ul>
  </template>
  
  <script>
  export default {
    props: {
      items: {
        type: Array,
        required: true,
        validator: (value) => {
          return value.every(item => item.id && item.textKey)
        }
      }
    },
    emits: ['update-item']
  }
  </script>
  

• Composition API写法：

  <template>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ t(item.textKey) }}
        <button @click="handleUpdateItem(item.id, 'new-text-key')">修改</button>
      </li>
    </ul>
  </template>
  
  <script setup>
  import { useI18n } from 'vue-i18n'
  const { t } = useI18n()
  
  const props = defineProps({
    items: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(item => item.id && item.textKey)
      }
    }
  })
  
  const emit = defineEmits(['update-item'])
  const handleUpdateItem = (id, newTextKey) => {
    emit('update-item', id, newTextKey)
  }
  </script>
  

3. 双向读取的注意事项 #

Vue的Prop是单向数据流，不能直接在子组件修改Prop数组的项。如需修改，必须通过emit事件通知父组件，由父组件更新原数组：

父组件接收事件并更新：

<template>
  <MyComponent :items="items" @update-item="handleUpdateItem" />
</template>

<script setup>
import { ref } from 'vue'
const items = ref([
  { id: 1, textKey: 'greeting' },
  { id: 2, textKey: 'welcome' }
])

const handleUpdateItem = (id, newTextKey) => {
  const targetItem = items.value.find(item => item.id === id)
  if (targetItem) {
    targetItem.textKey = newTextKey
  }
}
</script>

三、额外提示 #

• 如果数组项是纯文本而非翻译key，建议在父组件提前完成翻译再传递给子组件，减少子组件对i18n的依赖：

  // 父组件预处理翻译
  const translatedItems = items.value.map(item => ({
    id: item.id,
    text: t(item.textKey)
  }))
  

• 确保i18n实例已正确挂载到Vue应用，示例main.js代码：

  import { createApp } from 'vue'
  import { createI18n } from 'vue-i18n'
  import App from './App.vue'
  import en from './locales/en.json'
  import zh from './locales/zh.json'
  
  const i18n = createI18n({
    locale: 'zh',
    messages: {
      en,
      zh
    }
  })
  
  createApp(App).use(i18n).mount('#app')
  

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