Vue3 在defineProps中某个属性的默认值使用多语言i18n 异常defineProps()` in <script setup> cannot reference locally declared variables because it will be hoisted outside of the setup() function

原代码

<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: Array,
    default: []
  },
  typeName: {
    type: String,
    default:t('TypeName')
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
</script>

 

异常

 大致意思是，defineProps()与<script setup>是两个不同的作用域，defineProps()不能直接使用<script setup>中的定义的内容，可以单独使用一个不带setup的<script >去定义需要的变量或函数的变动的内容

 

解决方法

方式一：在<script setup>之外定义一个<script >定义多语言的内容（defaultTypeName）

<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: Array,
    default: []
  },
  typeName: {
    type: String,
    default:defaultTypeName
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
</script>
<script lang="ts">
import i18n from '@/lang/i18n'

const { t } = i18n.global
const defaultTypeName = t('TypeName')
</script>

 

方式二：将defaultTypeName 等变动的内容定义在其他公共的文件中使用“Import”引入使用

<script setup lang="ts">
import Config from '@/common/config'

const { defaultTypeName } = Config()
const props = defineProps({
  modelValue: {
    type: Array,
    default: []
  },
  typeName: {
    type: String,
    default:defaultTypeName
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
</script>