脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3 defineProps设置默认值报错

Vue3 defineProps设置默认值报错问题及解决过程

 更新时间：2025年08月04日 09:14:05   作者：下雪天的夏风  
这篇文章主要介绍了Vue3 defineProps设置默认值报错问题及解决过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题

使用 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> 来导出这些选项。

分析

SFC 有2个 scope：module scope 和 setup 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(),
});

按报错提示信息测试

所以按照报错提示信息，可使用单独的 <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>

测试 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 中使用函数调用的方式，就会报错。

解决

所以，使用外部导入的方式来使用 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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue项目引入远程jweixin-1.2.0.js文件并使用详解

    vue项目引入远程jweixin-1.2.0.js文件并使用详解

    这篇文章主要介绍了vue项目引入远程jweixin-1.2.0.js文件并使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • 详解nginx配置vue h5 history去除#号

    详解nginx配置vue h5 history去除#号

    这篇文章主要介绍了详解nginx配置vue h5 history去除#号，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue2+elementUI实现下拉树形多选框效果实例

    vue2+elementUI实现下拉树形多选框效果实例

    这篇文章主要给大家介绍了关于vue2+elementUI实现下拉树形多选框效果的相关资料,这是最近的工作中遇到的一个需求,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 在vue中使用iframe解决视频资源的防盗链

    在vue中使用iframe解决视频资源的防盗链

    我们的vue2.0项目当中,存储了许多图片和视频资源,所以我们需要增加防盗链设置,但是这样一来,当我们将其他网站上的视频资源,想入到我们的环境当中的时候,会报错,所以本文给大家介绍了在vue中使用iframe解决视频资源的防盗链,需要的朋友可以参考下
    2023-12-12
  • Nginx部署前端Vue项目的步骤、常见问题与解决方案

    Nginx部署前端Vue项目的步骤、常见问题与解决方案

    在现代Web开发中,Vue.js成为前端开发者构建单页应用的热门框架,Nginx以其高性能和稳定性,成为部署Vue项目的理想选择,这篇文章主要介绍了Nginx部署前端Vue项目的步骤、常见问题与解决方案,需要的朋友可以参考下
    2024-09-09
  • Vue 3 动态 ref 的使用方式以表格为列

    Vue 3 动态 ref 的使用方式以表格为列

    我正在开发的项目中,有一个表格组件,其中一列是分镜描述,需要支持视频上传功能,下面给大家介绍Vue 3动态ref的使用方式以表格为列给大家详细讲解,感兴趣的朋友一起看看吧
    2023-07-07
  • Vue Getters和mapGetters的原理及使用示例详解

    Vue Getters和mapGetters的原理及使用示例详解

    Vuex的核心概念包括state、mutations、actions、getters和modules,今天,我们要深入探讨其中一个关键部分：getters,以及它的相关辅助函数mapGetters,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • vue-router钩子函数实现路由守卫

    vue-router钩子函数实现路由守卫

    这篇文章主要介绍了vue-router钩子函数实现路由守卫，对vue感兴趣的同学，可以参考下
    2021-04-04
  • vue实现div可拖动位置也可改变盒子大小的原理

    vue实现div可拖动位置也可改变盒子大小的原理

    这篇文章主要介绍了vue实现div可拖动位置也可改变盒子大小，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • vue3.0+ts引入详细步骤以及语法校验报错问题解决办法

    vue3.0+ts引入详细步骤以及语法校验报错问题解决办法

    Vue 3.0是一个非常流行的JavaScript框架,不仅易于学习和使用,而且可以与许多UI框架集成,下面这篇文章主要给大家介绍了关于vue3.0+ts引入详细步骤以及语法校验报错问题的解决办法,需要的朋友可以参考下
    2024-01-01

最新评论