vue3 ts defineProps()设置i18n无效

项目环境：vue3 ts + element plus + i18n 

我想在组件中的默认值中defineProps()中设置国际化，本组件就是一个form表单，其中有查询按钮，及重置按钮，原本是写活，可以在调用时，自己设置，但现在要求要配置国际化。但运行突然报了错，如下：.

希望页面功能如下：

下方是报错：

组件具体代码如下：

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 解构出t方法
...


const props = defineProps({
...
formBtn: {
    type: Object,
    default() {
      return {
        query: {
          text: t('system.query.btnSubmit'),//这是一个按钮的配置，也是问题所在
          type: 'primary',
          show: true,
        },
        reset: {
          text: '', //resetTxt,
          type: '',
          show: true,
        },
      }
    },
  },
...

})

</script>

大致意思是就是，在defineProps中，你不可以设置变量形式的内容，因为国际化t('')是个函数，所以导致了的错，组件默认值不可以用变量形式，

有网友的回答如下：

当我们使用script setup的时候，其实是编译器帮我们把代码编译回去setup的方法，类似我们在defineComponent里写setup方法，所以setup本身是一个独立的作用域（setup scope）。

而vue组件本身是一个js文件，也就是script方法里也是一个作用域(module scope)。

也就是说一个vue组件其实同时具备了两个作用域。

作者：星光免兔

https://www.bilibili.com/read/cv17785652/ 出处：bilibili

解决方法：

在下方新增个script标签

<script setup lang="ts">
//原来的页面逻辑

import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 解构出t方法
...


const props = defineProps({
...
formBtn: {
    type: Object,
    default() {
      return {
        query: {
          text: queryTxt,//在下方已经定义了
          type: 'primary',
          show: true,
        },
        reset: {
          text: resetTxt,//在下方已经定义了
          type: '',
          show: true,
        },
      }
    },
  },
...

})

</script>


//第二个script中没有setup，因为一个vue3中，有且只有一个setup，同时lang也要一致。
<script lang="ts">
//新增的内容

//因为是ts文件，所以按普通页面的国际化法引入
import i18n from '@/lang/index'
let _t: any = i18n.global

//设置两个变量，因为在一个文件中，有两个相同的域，所以，上方是可以引入这个变量的。
let queryTxt: string = _t.t('system.query.btnSubmit')
let resetTxt: string = _t.t('system.query.btnReset')
</script>

此时，页面不报错了。

英文状态

中文状态

现在可以自己切换了，提示，目前我的切换后必须要刷新一下页面，不知道为什么i18n在普通ts\js文件中设置是无法无刷新切换的。

回顾i18n用法：

在vue3+ts中，如.<标签>{{ $t('login.title') }}</标签>

<div class="title">{{ $t('login.title') }}</div>

2 在<script setup>...</script>中

2.1 普通用法（最常见的）

• a.引入：vue-i18n（请注意：是引入的vue-i18，并且通过useI18n解构），并且解构{t}。
• b.使用：直接使用t("")方法，如：t('login.form.fields.userName')

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 解构出t方法

// 随便定义一个变量
let message:string = t('login.form.fields.userName')

...
<script>

2.2 在普通.ts文件，或者.js文件中使用

在普通文件中，你就不能使用上述方法引入了。你必须引入本地文件中的i18n。具体如下：

//common.ts文件中。

...
import i18n from '@/lang/index' //我本地的i18n实例
let _t: any = i18n.global


//公共配置
export let common: any = {
    site: {
       title: _t.t('system.global.companyName')//站点名称
    },

}
...

这个时候，你的国际化就设置完毕了。

但是你一切换的时候，必须要重新刷下页面才行，否则普通js\ts中的内容无法切换，我尝试了很多种方法都不行。