VueJS组件方法中如何正确引用prop属性

你贴的演示代码里，methods中通过this.notificationID访问prop的写法本身是符合Vue选项式API规范的，实际运行访问失败基本是以下几个常见问题导致，对照排查即可：

• 不要用箭头函数定义methods里的方法
  箭头函数没有独立的this上下文，会绑定到外层非组件实例的作用域，这时候this根本不指向当前组件实例，自然拿不到挂载在实例上的prop、data等属性。错误写法参考：

  methods: {
    // 错误写法，箭头函数导致this指向偏移
    clicked: () => {
      console.log(this.notificationID) // 此时this不是组件实例，取值失败
    }
  }
  

  方法必须用普通函数定义，也就是你示例里的写法才是正确的。
• 检查父组件传参的属性名是否正确
  小驼峰命名的prop（比如notificationID），在DOM模板中作为属性传递时需要写成短横线分隔格式notification-id，如果父组件传参时属性名拼写错误、或者根本没传这个prop，组件内自然取不到值。可以先在方法里打印全量prop确认传值情况：

  methods: {
    clicked() {
      console.log(this.$props) // 查看输出里是否存在notificationID字段、值是否正确
      this.$emit('eventName', this.notificationID)
    }
  }
  

• 检查命名冲突
  如果data、computed、methods里存在和prop同名的属性/方法，会覆盖prop的取值，注意保证命名唯一。

如果你用的是Vue3 <script setup> 组合式语法，不需要通过this访问prop，直接使用声明的prop变量即可，和你当前的选项式写法有区别。

排查完以上问题，就可以正常在点击方法里拿到notificationID的值了。

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