当前位置:   article > 正文

Vue3中使用i18n,this.$t报错

Vue3中使用i18n,this.$t报错

方案一 

//需要把$t手动挂载到全局 

  1. //main.js
  2. app.config.globalProperties.$t = i18n.global.t
  1. //需要使用的时候在组件里引用
  2. import { getCurrentInstance } from 'vue'
  3. const _this = getCurrentInstance().appContext.config.globalProperties
  4. console.log('$i18n',_this.$t('欢迎'))

方案二

legacy设置为false

  1. //main.js
  2. const i18n = createI18n({
  3. locale: localStorage.getItem('i18n-lang'),
  4. fallbackLocale: 'zh',
  5. messages: {
  6. en,
  7. zh
  8. },
  9. legacy: false
  10. })
  1. //组件中先引用再使用
  2. import { useI18n } from 'vue-i18n'
  3. const { t } = useI18n()
  4. console.log('$i18n',t("欢迎"))

方案三

直接像vue2一样,使用选项式写法,可以直接使用

  1. //使用vue选项式写法,可以直接使用this.$t
  2. <script>
  3. export default {
  4. methods:{
  5. change(){
  6. console.log(this.$t('欢迎'))
  7. }
  8. },
  9. mounted() {
  10. this.change()
  11. }
  12. }
  13. </script>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/492527
推荐阅读
相关标签
  

闽ICP备14008679号