【已解决】TypeError: _ctx.$t is not a function when using $t in child component

项目使用的工具及版本

    "vue": "^3.2.13",

    "vue-i18n": "^9.2.2",

问题背景：前几天在做一个登录的小demo，然后因为没有怎么理解代码就跟着敲，然后运行的时候浏览器控制台就报错：TypeError:_ctx.$t is not a function when using $t in child component，如下图：

 然后我就百度了一下i18n是什么？

i18n 全称 Internationalization，也就是国际化的意思，因为单词太长，所以中间的 18 个字母被缩写为 18，再加上开头和结尾的字母，就组成了 i18n。然后JavaScript i18n API 可以帮助我们对网站进行多语言翻译，让它们可以轻松适应使用不同语言用户的需求。

主要解决思路：

1.在项目根目录的src创建i18n.js文件

import { createI18n } from "vue-i18n";

const i18n = createI18n({
  legacy: false,
  locale: "ja",
  globalInjection: true,
  messages: {
    en: {
      message: {
        language: "English",
        greeting: "Hello !"
      }
    },
    ar: {
      message: {
        language: "العربية",
        greeting: "السلام عليكم"
      }
    },
    es: {
      message: {
        language: "Español",
        greeting: "Hola !"
      }
    }
  }
});
export default i18n;

2.在mian.js中引入并挂载上

...
/* “...” :表示前面省略的代码*/

//引入
import Vue I18n from "./i18n"
...

//将VueI18n挂载上app
app.use(store).use(router).use(VueI18n).mount('#app')

 最后大家就可以成功的使用i18n这个api了。如果我的思路对大家有用的话，大家可以点点赞。先在这里表示感谢了。