首页 > 其他分享 >Vue3 在defineProps中某个属性的默认值使用多语言i18n 异常defineProps()` in <script setup> cannot reference locall

Vue3 在defineProps中某个属性的默认值使用多语言i18n 异常defineProps()` in <script setup> cannot reference locall

时间:2025-01-21 11:33:29浏览次数:1  
标签:function const default defaultTypeName i18n 默认值 type defineProps

原代码

<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>

 

标签:function,const,default,defaultTypeName,i18n,默认值,type,defineProps
From: https://www.cnblogs.com/sugarwxx/p/18683277

相关文章

  • AI - ReAct 技术与 Function Call 技术介绍
    ReAct技术与FunctionCall技术介绍1.ReAct技术ReAct是一种用于增强语言模型推理能力的技术,通过在模型的推理过程中引入“思考”(thought)步骤,帮助模型更好地理解和规划下一步行动。核心思想:ReAct在传统的“行动-观察”(action-observation)循环中加入了“思考”步骤,......
  • 打包前端项目时报错:Task function must be specified
    注意:以下示例是你前端环境安装好的情况下排查的问题,前端环境没安装好请自行安装好报错示例:输入命令: gulp-v查看全局gulp和本地项目的gulp版本  这里可以看出这两个版本不一致,这时我们需要在项目里去修改一下对应的版本,改成3.0.0(这里根据自己的需求更改就好)重新运行......
  • Flink (九):DataStream API (六) Process Function
    1.ProcessFunctionProcessFunction 是一种底层的流处理操作,基于它用户可以访问(无环)流应用程序的所有基本构建块事件(流元素)状态(容错,一致性,仅在keyedstream上)定时器(事件时间和处理时间,仅在keyedstream上)可以将 ProcessFunction 视为一种可以访问keyedstate和定时......
  • 解析function(_0x457ace, _0x349832) 即random出处
    function(_0x457ace,_0x349832){ _0x457ace=_0x457ace-0x18a; var_0x4c6e1a=_0x19971f[_0x457ace]; if(a0_0x457a['pIaRKj']===undefined){ var_0x2a073e=function(_0x3f86c9){ var_0x153ef8='abcdefghijklmnopqrstuvwxyzABCDEFGH......
  • 【0388】Postgres内核 SQL function 删除 physical replication slot 底层实现( 4 )
    文章目录1.概述2.`SQLfunction`2.1待删除`physicalreplicationslot`2.2检查当前用户权限2.3检查`Postgres`服务配置3.删除`physicalreplicationslot`3.1获取先前创建的`slot`3.1.1获取`slot`3.1.1初始化`active_pid`3.2永久删......
  • 深入浅出:Agent如何调用工具——从OpenAI Function Call到CrewAI框架
    深入浅出:Agent如何调用工具——从OpenAIFunctionCall到CrewAI框架嗨,大家好!作为一个喜欢折腾AI新技术的算法攻城狮,最近又学习了一些Agent工作流调用工具的文章,学完之后,我真的是“啊这”,一边感慨AI技术的强大,一边觉得自己打开了新世界的大门。于是,我决定写这篇博客,把我的学习心得......
  • 【Azure Function】C#独立工作模式下参数类型 ServiceBusReceivedMessage 无法正常工
    问题描述在C#AzureFunction使用ServiceBus作为触发器时候,在C#独立工作模式下,说可以支持使用 ServiceBusReceivedMessage类型作为触发消息的参数类型:[Function(nameof(ServiceBusReceivedMessageFunction))][ServiceBusOutput("outputQueue",Connect......
  • UsernamePasswordAuthenticationToken 类的构造器逻辑,来控制 isAuthenticated 的默认
    publicclassUsernamePasswordAuthenticationTokenextendsAbstractAuthenticationToken{privatefinalObjectprincipal;privateObjectcredentials;//构造器1:未认证时调用publicUsernamePasswordAuthenticationToken(Objectprincipal,Objectcredent......
  • Functional接口(函数式接口)
    函数式接口是指仅包含一个抽象方法的接口。它可以包含多个默认方法或静态方法,但抽象方法只能有一个。这种接口都有一个@FuntionalInterface注解。我们可以直接使用Lambda表达式来创建函数式接口,然后将创建的函数式接口直接作为某些方法的参数。eg:list.forEach(t->Syst......
  • Vue - 解决报错 TypeError: transpileDependencies.map is not a function(vue项目运行
    前言关于此问题网上的教程都无法解决,如果您的报错信息与我相似,即可解决。在vue项目开发中,解决项目运行报错:ERRORTypeError:transpileDependencies.mapisnotafunction,莫名其妙非常恶心的错误,另外项目打包build时也可能会提示错误,vue项目跑不起来了,无论是新老项目......