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

这篇具有很好参考价值的文章主要介绍了【已解决】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，如下图：

$t is not a function,javascript,前端

然后我就百度了一下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了。如果我的思路对大家有用的话，大家可以点点赞。先在这里表示感谢了。文章来源地址https://www.toymoban.com/news/detail-596285.html

到了这里，关于【已解决】TypeError: _ctx.$t is not a function when using $t in child component的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！