i18n的$t()方法使用

i18n使用：

掌握i18n的$t()方法使用

要点：
$t支持传参，参数可以是对象或数组。
对象参数用于命名占位符（如{msg}），数组用于位置占位符（如{0}）。
需要确保i18n配置正确，特别是legacy设为false和类型声明。
提供示例代码，说明不同参数的用法。
可能需要使用useI18n在Composition API中获取t函数。

---

一、$t()传参的基本用法：

1. 命名参数（推荐）
   语言文件定义：在翻译键值中使用 {变量名} 占位符。
   调用方式：通过对象传递参数。
   示例：

// 语言文件（如zh.json）
{
  "greeting": "你好，{name}！欢迎来到{place}。"
}

// Vue模板中使用：
{{ $t('greeting', { name: '张三', place: 'Vue3世界' }) }}
// 输出：你好，张三！欢迎来到Vue3世界。

2. 位置参数（数组）
   语言文件定义：在翻译键值中使用 {0}、{1} 等索引占位符。
   调用方式：通过数组传递参数，顺序对应占位符。
   示例：

// 语言文件（如zh.json）
{
  "greeting": "你好，{0}！欢迎来到{1}。"
}

// Vue模板中使用：
{{ $t('greeting', ['李四', 'Vue3世界']) }}
// 输出：你好，李四！欢迎来到Vue3世界。

---

二、在不同场景中的使用：

1. 在 template 模板中

<template>
  <div>
    <!-- 命名参数 -->
    {{ $t('message.hello', { name: 'Alice' }) }}

    <!-- 位置参数 -->
    {{ $t('message.hello_array', ['Bob', 'Vue3']) }}
  </div>
</template>

<script setup>
// 假设语言文件：
// message.hello: "你好，{name}！"
// message.hello_array: "你好，{0}！欢迎来到{1}"
</script>

2. 在 script setup 或 Composition API 中

<script setup>
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

// 命名参数
const message1 = t('message.hello', { name: 'Charlie' });

// 位置参数
const message2 = t('message.hello_array', ['Dave', 'Vue3']);
</script>

3. 在 TypeScript 中避免类型错误
   如果使用 TypeScript，需确保 vue-i18n 的类型声明正确（参考知识库[3]）：

// src/shims-vue-i18n.d.ts
import { ComponentCustomProperties } from 'vue';
import { I18n } from 'vue-i18n';

declare module 'vue' {
  interface ComponentCustomProperties {
    $t: I18n['t'];
    $tc: I18n['tc'];
  }
}

---

三、注意事项：

1. 语言文件的占位符格式：
   命名参数：必须与传递的参数对象的键名完全一致。
   位置参数：占位符的索引必须与数组参数的顺序一致。
2. 配置 vue-i18n 实例：
   在 Vue3中，需设置 legacy: false 并开启全局注入：

// main.ts
import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  legacy: false,
  globalInjection: true, // 允许在模板中使用 $t
  // 其他配置...
});

3. 在非组件上下文中使用：
   如果在 Vue 组件外部（如工具函数）需要调用 $t，可通过 i18n.global.t：

import { createI18n } from 'vue-i18n';
import i18n from '@/plugins/i18n';

function formatMessage(key: string, params: any) {
  return i18n.global.t(key, params);
}

四、对比 t和tc

$t：普通翻译，适用于单数或固定参数。
$tc：处理复数形式，需结合语言文件中的复数规则（参考知识库[1]）：

// 语言文件：
// 'item.count': '{count} 项|{count} 个项目'

// 使用 $tc 根据数值选择复数形式
{{ $tc('item.count', 1, { count: 1 }) }} // 输出：1 项
{{ $tc('item.count', 2, { count: 2 }) }} // 输出：2 个项目

五、总结

支持传参：$t() 可通过对象或数组传递参数。
推荐命名参数：更清晰且不易出错。
配置检查：确保 vue-i18n 的 legacy 和类型声明正确。
复数处理：用 $tc() 替代 $t() 处理复数场景。
如果遇到参数未生效的问题，检查占位符格式是否与参数类型匹配，并确保 vue-i18n 的版本和配置正确