快捷導(dǎo)航

Vue3 defineProps設(shè)置默認(rèn)值報(bào)錯(cuò)問題及解決過程

更新時(shí)間：2025年08月04日 09:14:05 作者：下雪天的夏風(fēng)

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

問題

使用 defineProps 指定默認(rèn)值時(shí)報(bào)錯(cuò)，代碼如下：

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

報(bào)錯(cuò)信息：

翻譯：

<script setup> 中的 defineProps() 不能引用本地聲明的變量，因?yàn)樗鼘⒈惶嵘?setup() 函數(shù)外。
如果你的組件選項(xiàng)需要在 module scope（模塊作用域）中初始化，可使用單獨(dú)的 <script> 來導(dǎo)出這些選項(xiàng)。

分析

SFC 有2個(gè) scope：module scope 和 setup scope。

按照報(bào)錯(cuò)信息分析：因?yàn)樵?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，修改代碼如下，渲染報(bào)錯(cuò)！

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

按報(bào)錯(cuò)提示信息測試

所以按照報(bào)錯(cuò)提示信息，可使用單獨(dú)的 <script> 來導(dǎo)出這些選項(xiàng)：

方式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)用的方式，就會報(bào)錯(cuò)。

解決

所以，使用外部導(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>