如何翻译组件的传入属性/属性?例如,我有一个卡片组件,其中定义了标题和描述属性。
<!-- my-card 组件 -->
<template>
<div>
<h2>{{title}}</h2>
<span>{{description}}</span>
</div>
</template>
<script>
export default {
props: {
title: String,
descritpion: String
}
}
</script>
然后在另一个页面/组件中使用my-card组件,如下所示
<template>
<div>
<header>页面头部</header>
<my-card :title="最好的卡片标题" :description="最好的描述" />
<footer>页面底部</footer>
</div>
</template>
如何使用vue I18n来翻译组件的属性?
<template>
<div>
<header>页面头部</header>
<my-card :title="{{ $t('myCard.title')}}" :description="{{$t('myCard.description')}}" />
<footer>页面底部</footer>
</div>
</template>
我似乎无法使传入的属性翻译起作用。
附:我知道我可以在定义my-card组件的地方添加翻译,但这里的问题是组件是来自NPM库的第三方组件。
我知道React.js中的一些包具有此功能。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
您可以在组件属性中使用I18n翻译,如下所示。
<my-card :title="$t('myCard.title')" :description="$t('myCard.description')" />只需绑定翻译,而不使用
{{}}:<my-card :title="$t('myCard.title')" :description="$t('myCard.description')" />