快捷導(dǎo)航

Vue3 defineProps設(shè)置默認值報錯問題及解決過程

更新時間：2025年08月04日 09:14:05 作者：下雪天的夏風

這篇文章主要介紹了Vue3 defineProps設(shè)置默認值報錯問題及解決過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

問題

使用 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() 函數(shù)外。
如果你的組件選項需要在 module scope（模塊作用域）中初始化，可使用單獨的 <script> 來導(dǎo)出這些選項。

分析

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> 來導(dǎo)出這些選項：

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

發(fā)現(xiàn) const { t } = useI18n(); 只能在 setup 中使用：

但如果在 setup 中使用函數(shù)調(diào)用的方式，就會報錯。

解決

所以，使用外部導(dǎo)入的方式來使用 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>