Vue2 - props里使用this
【摘要】 Vue2 - props里使用this
props: {
title: {
type: String,
default: this.$t('baseManage.detail-log.405007-15'),
},
},
这个vue组件的props属性,this.$t报错了,这是为什么
在 Vue 组件的 props
中使用 this.$t
会报错是因为 props
是在组件实例化之前定义的,而 this
在这个阶段还没有被初始化。因此,this
不能在 props
的默认值中使用。
为了在 props
中使用 this.$t
,你需要在组件的生命周期钩子或其他方法中进行初始化,而不是直接在 props
定义中使用 this.$t
。
以下是一个解决方案,使用 computed
属性来动态设置 title
的默认值:
<template>
<div>
<h1>{{ computedTitle }}</h1>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: null, // 默认值设为 null
},
},
computed: {
computedTitle() {
// 如果 props 中的 title 有值,使用它;否则使用 this.$t 生成的值
return this.title || this.$t('baseManage.detail-log.405007-15');
},
},
};
</script>
<style scoped>
/* 你可以在这里添加样式 */
</style>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)