Vue+TypeScript组件报错：Property or method 'title'未定义求解决

你遇到的核心问题是NavItem组件没有正确声明接收父组件传递的props，导致Vue无法识别title和link属性，只能把它们放到$attrs里，同时模板引用{{title}}时触发了"属性未定义"的警告。

问题分析 #

你提到尝试过定义Prop但没解决，应该是vue-property-decorator的@Prop装饰器用法有误。在基于类的Vue组件中，必须用@Prop明确声明要接收的props，否则Vue不会把父组件传递的属性绑定到组件实例上，自然无法在模板中直接使用。

修正后的NavItem组件代码 #

把你的NavItem组件修改成这样即可解决问题：

<template>
<li class="nav-item">
  <!-- 现在可以正常访问title属性 -->
  <router-link :to="link" class="nav-link">{{ title }}</router-link>
</li>
</template>
<script lang="ts">
import { Prop, Component, Vue } from 'vue-property-decorator'

@Component
export default class NavItem extends Vue {
  // 声明title prop，指定类型为字符串，标记为必填
  @Prop({ required: true, type: String })
  title!: string

  // 声明link prop，同样指定类型为字符串，标记为必填
  @Prop({ required: true, type: String })
  link!: string
}
</script>

关键说明 #

1. @Prop装饰器的正确用法：
   • 用@Prop()装饰类属性来声明props，括号内可以配置选项：比如required标记属性是否必填，type指定属性类型，default设置默认值
   • TypeScript中需要用!告诉编译器：这个属性会被Vue注入，无需提前初始化，避免编译器报错
2. 为什么之前不生效：
   你之前的NavItem组件没有任何props声明，父组件传递的title和link被Vue归类为"未被组件声明的属性"，只能存到$attrs中，组件实例上并没有title这个响应式属性，模板引用自然会触发警告。

验证效果 #

修改完成后：

• 模板里的{{ title }}可以正常显示父组件传递的菜单标题
• Chrome Vue调试器里的$attrs不会再包含title和link
• 控制台的属性未定义警告会完全消失

内容的提问来源于stack exchange，提问作者BGestel