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 数据绑定的原理分析
这篇文章主要介绍了Vue 数据绑定的原理，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-11-11
VUE+elementui组件在table-cell单元格中绘制微型echarts图
这篇文章主要介绍了VUE+elementui组件在table-cell单元格中绘制微型echarts图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
基于vue和react的spa进行按需加载的实现方法
这篇文章主要介绍了基于vue和react的spa进行按需加载,需要的朋友可以参考下
2018-09-09
前端框架学习总结之Angular、React与Vue的比较详解
这篇文章主要跟大家分享了关于前端框架中Angular.js、React.js与Vue.js的全方位比较，文章介绍的非常详细，对大家进行区分对比这三者之间的差异区别很有帮助，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-03-03
vue实现原理this.$message实例详解
这篇文章主要介绍了vue实现原理this.$message实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03
vue多个元素的样式选择器问题
这篇文章主要介绍了vue多个元素的样式选择器问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-11-11
vue2手机APP项目添加开屏广告或者闪屏广告
这篇文章主要为大家详细介绍了vue2手机APP项目添加开屏广告或者闪屏广告的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
vue版数字翻牌器的封装
这篇文章主要为大家详细介绍了vue版数字翻牌器的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
详解Vue中Axios封装API接口的思路及方法
这篇文章主要介绍了详解Vue中Axios封装API接口的思路及方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
vue cli 局部混入mixin和全局混入mixin的过程
这篇文章主要介绍了vue cli 局部混入mixin和全局混入mixin的过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05