Vue2 - props里使用this

举报
皮耶罗夫斯基 发表于 2024/11/29 15:59:58 2024/11/29
【摘要】 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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。