解决:Vue3 - defineProps 设置默认值报错问题

news2024/11/24 18:37:25

目录

  • 1,问题
  • 2,分析
    • 2.1,按报错提示信息测试
    • 2.2,测试 vue-i18n
  • 3,解决

1,问题

使用 defineProps 指定默认值时报错,代码如下:

<template>
	<input type="text" :placeholder="props.placeholder" />
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";

const { t } = useI18n();

interface Props {
	placeholder: string;
}
const props = withDefaults(defineProps<Props>(), {
	placeholder: t("home.title"),
});
</script>

报错信息:

在这里插入图片描述

翻译:

<script setup> 中的 defineProps() 不能引用本地声明的变量,因为它将被提升到 setup() 函数外。如果你的组件选项需要在 module scope(模块作用域)中初始化,可使用单独的 <script> 来导出这些选项。

2,分析

SFC 有2个 scopemodule scopesetup scope

按照报错信息分析:因为在 setup scope 中定义的本地变量会被提升到 module scope。所以 defineProps() 不能引用本地声明的变量。

在 官方文档 中也有说明,

在这里插入图片描述

测试1

<template>
	<input type="text" :placeholder="props.placeholder" />
</template>

<script setup lang="ts">
interface Props {
	placeholder: string;
}
const a = "1234";
const props = withDefaults(defineProps<Props>(), {
	placeholder: a,
});
</script>

这样定义的本地变量,渲染并没有问题!

测试2,修改代码如下,渲染报错!

const a = () => "1234";
const props = withDefaults(defineProps<Props>(), {
	placeholder: a(),
});

2.1,按报错提示信息测试

所以按照报错提示信息,可使用单独的 <script> 来导出这些选项:

方式1:√

<script lang="ts">
const a = () => "1234";
</script>

<script setup lang="ts">
interface Props {
	placeholder: string;
}

const props = withDefaults(defineProps<Props>(), {
	placeholder: a(),
});
</script>

方式2:√

export const a = () => "1234";
<script setup lang="ts">
import { a } from "./index";
interface Props {
	placeholder: string;
}

const props = withDefaults(defineProps<Props>(), {
	placeholder: a(),
});
</script>

2.2,测试 vue-i18n

<script lang="ts">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
</script>

<script setup lang="ts">
interface Props {
	placeholder: string;
}
const props = withDefaults(defineProps<Props>(), {
	placeholder: t("home.title"),
});
</script>

发现 const { t } = useI18n(); 只能在 setup 中使用:

在这里插入图片描述

但如果在 setup 中使用函数调用的方式,就会报错。

3,解决

所以,使用外部导入的方式来使用 vue-i18n

<template>
	<input type="text" :placeholder="props.placeholder" />
</template>

<script setup lang="ts">
import i18n from "@/i18n";

interface Props {
	placeholder: string;
}
const props = withDefaults(defineProps<Props>(), {
	placeholder: i18n.global.t("home.title"),
});
</script>

以上。

参考1

参考2

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2127602.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1分钟从出差申请到自动入账,用友BIP超级版超级快!

在当今的商业战场&#xff0c;时间就是金钱&#xff0c;效率决定成败。对于频繁出差的商务精英而言&#xff0c;繁琐的差旅申请与报销流程无疑是巨大的时间浪费。现在&#xff0c;用友BIP超级版商旅费控一体化解决方案&#xff0c;将彻底改变这一现状&#xff0c;操作仅需1分钟…

【无人机设计与控制】固定翼四旋翼无人机UAV俯仰姿态飞行模糊自整定PID控制Simulink建模

摘要 本研究设计了一种基于模糊自整定PID控制的固定翼四旋翼无人机俯仰姿态控制系统。利用Simulink建立了无人机俯仰控制系统模型&#xff0c;通过模糊控制器自适应调节PID参数&#xff0c;实现了对无人机俯仰角度的精确控制。实验结果表明&#xff0c;该控制策略在不同飞行状…

机器学习-特征工层

机器学习-特征工层 仅个人笔记使用&#xff0c;感谢点赞关注 目前仅专注于 NLP 大模型 机器学习和前后端的技术学习和分享 感谢大家的关注与支持&#xff01;

【 html+css 绚丽Loading 】000047 玄武流转盘

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享htmlcss 绚丽Loading&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495…

有关 Element-ui 的一些思考

本篇文章是基于 element-ui 的 主题样式修改 曾经为了修改组件风格,一个项目用了上百个样式穿透,后来才发现定制一个主题就够了! 第一步,在官网的主题页面,修改背景色、字体颜色及边框颜色 第二步,下载主题 第三步,用下载的css文件替换掉默认的css文件

得物超级品质保障中心,助力电商品质保障迈向新高度

近期记者走进国内知名潮流电商平台——得物App的超级品质保障中心。该中心位于上海市嘉定区&#xff0c;总建筑面积达到约12万平方米&#xff0c;是集查验鉴别、鉴别研究、质量管理、仓储流转等功能于一体的综合性服务设施&#xff0c;全面覆盖了服装、配饰、奢侈品等多个业务品…

关于java学习基础路线的分享【javaSE】

成长路上不孤单&#x1f60a;【14后&#xff0c;C爱好者&#xff0c;持续分享所学&#xff0c;如有需要欢迎收藏转发&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#xff01;&#xff01;&#xff01;&#xff01;&#xff…

计算一批集合中包含指定成员的次数

有一个用Excel表格表示的赛事分组图&#xff0c;从C1:V13&#xff0c;每6列表示四个选手的一桌比赛&#xff0c;1-16表示16位选手的编号。 ABCDEFGHIJKLMNOPQRSTUV118141112214313101516652231579111315246810123311814153691213165214449131548121637101426553211161471015161…

fmql之ubuntu移植

官方资料&#xff1a;ubuntu18的压缩包 目的&#xff1a;放到SD卡中启动ubuntu&#xff08;官方是放在emmc中&#xff09; 教程&#xff1a;99_FMQL45_大黄蜂开发板跑ubuntu18.04.docx 所需文件 其中&#xff0c;format_emmc_ext4.txt对emmc的分区是512M&#xff08;放上述文…

基于STM32C8T6的CubeMX:HAL库点亮LED

三个可能的问题和解决方法&#xff1a; 大家完成之后回来看&#xff0c;每一种改错误都是一种成长&#xff0c;不要畏惧&#xff0c;要快乐&#xff0c;积极面对&#xff0c;要耐心对待 STMCuBeMX新建项目的两种匪夷所思的问题https://mp.csdn.net/mp_blog/creation/editor/1…

2024年增强现实(AR)的现状

自从2017年苹果和安卓推出SDK&#xff0c;让移动设备上的增强现实构建变得容易以来&#xff0c;AR已经获得了显著的受欢迎程度。现在&#xff0c;它已成为一种广为人知的常见技术&#xff0c;但随着时间的推移&#xff0c;它取代我们所有电子产品、成为我们可以每天长时间佩戴的…

点餐|基于java的电子点餐系统小程序(源码+数据库+文档)

电子点餐系统|小程序|在线点餐 目录 基于java的电子点餐系统小程序 一、前言 二、系统设计 三、系统功能设计 系统功能实现 前台&#xff1a; 后台&#xff1a; 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; …

yolov8+deepsort+botsort+bytetrack车辆检测和测速系统

结合YOLOv8、DeepSORT、BoTSORT和ByteTrack等技术&#xff0c;可以实现一个高效的车辆检测和测速系统。这样的系统适用于交通监控、智能交通管理系统&#xff08;ITS&#xff09;等领域&#xff0c;能够实时识别并跟踪车辆&#xff0c;并估算其速度。 项目介绍 本项目旨在开发…

<<编码>> 第 6 章 发报机与继电器(Telegraphs and Relays) 示例电路

##继电器 info::操作说明 注: 此处输入处未添加电源及开关, 因此不能控制继电器的开合 读者可自行添加电源及开关, 或查看后续可操作的例子 primary::在线交互操作链接 https://cc.xiaogd.net/?startCircuitLinkhttps://book.xiaogd.net/code-hlchs-examples/assets/circuit/c…

LOOKUP函数和VLOOKUP函数知识讲解与案例演示

〇、需求 在 Excel 文档中&#xff0c;根据查找值从查找域和结果域构成的数组中&#xff0c;找到对应的结果值。 一、知识点讲解 LOOKUP函数&#xff08;比较常用&#xff0c;推荐&#xff09;和VLOOKUP函数 两个公式都可以实现上述需求。 1. LOOKUP 函数 1.1 单个查询条件…

混合整数规划及其MATLAB实现

目录 引言 混合整数规划的基本模型 混合整数规划的求解方法 MATLAB中的混合整数规划实现 示例&#xff1a;多变量系统的混合整数规划 表格总结&#xff1a;混合整数规划的求解方法与适用场景 结论 引言 混合整数规划&#xff08;Mixed Integer Programming, MIP&#xf…

大象机器人------2、坐标控制

坐标控制 主要用于实现智能规划路线让机械臂从一个位置到另一个指定位置。分为[x,y,z,rx,ry,rz]&#xff0c;其中[x,y,z]表示的是机械臂头部在空间中的位置&#xff08;该坐标系为直角坐标系&#xff09;&#xff0c;[rx,ry,rz]表示的是机械臂头部在该点的姿态&#xff08;该坐…

如何将镜像推送到docker hub

前言 这一篇应该是最近最后一篇关于docker的博客了&#xff0c;咱来个有始有终&#xff0c;将最后一步——上传镜像给他写完&#xff0c;废话不多说&#xff0c;直接进入正题。 登录 首先需要确保登录才能推送到你的仓库中去&#xff0c;在终端输入docker login,输入用户名和…

通信工程学习:什么是HSS归属用户服务器

HSS&#xff1a;归属用户服务器 HSS&#xff08;归属用户服务器&#xff0c;Home Subscriber Server&#xff09;是IP多媒体子系统&#xff08;IMS&#xff09;中控制层的一个重要组成部分&#xff0c;它扮演着存储和管理用户相关信息的核心角色。以下是关于HSS归属用户服务器的…

中断映射及相关函数例程的控制流

GPIO 和 EXTIx 的映射关系 GPIOx0&#xff08;xA~G&#xff09;对应 EXTI0 &#xff1b; GPIOx1&#xff08;xA~G&#xff09;对应 EXTI1 &#xff1b; GPIOx2&#xff08;xA~G&#xff09;对应 EXTI2 &#xff1b; GPIOx15&#xff08;xA~G&#xff09;对应 EXTI15 &…