使用vue-property-decorator时父组件值变化子组件绑定prop未更新问题

1. 初始Prop不更新的核心原因是Vue2响应式限制：如果你的buttonPressed初始值为空对象，后续动态新增name属性时，Vue2无法监听到新增属性的变化，因此不会触发子组件Prop更新。
2. 给父组件buttonPressed加@Prop装饰器属于错误用法：@Prop是用来接收上层父组件传入的属性，你将父组件内部维护的状态声明为Prop后，Vue会认为该值来源于上层组件，直接修改就会触发「禁止直接修改Prop」的警告，此时能更新是因为误打误撞让这个变量被标记为了响应式，但用法完全错误。

第一步：修正父组件响应式状态声明 #

父组件AdminDashboardsPage内的buttonPressed是自身内部状态，不要加@Prop装饰器，初始化时提前声明name属性，确保响应式正常生效：

import { Component, Vue } from 'vue-property-decorator'

@Component
export default class AdminDashboardsPage extends Vue {
  // 初始化时就声明name属性，避免后续新增属性丢失响应式
  buttonPressed = { name: 'Header' }
  // 按钮配置数组根据自身业务定义即可
  buttonsArray = [
    { name: '按钮1', id: 1 },
    { name: '按钮2', id: 2 }
  ]

  handleButtonClick(buttonItem) {
    // 直接替换整个对象，或者修改已存在的name属性，都能触发响应式更新
    this.buttonPressed = { ...buttonItem }
    // 如果不想替换对象，也可以直接修改已存在的name属性：
    // this.buttonPressed.name = buttonItem.name
  }
}

第二步：简化父子组件绑定逻辑 #

如果你的子组件Modal不需要修改弹窗标题，完全不需要用.sync修饰符，直接用普通单向绑定即可，父组件模板写法：

<Modal :modal-header="buttonPressed.name" />

如果子组件确实需要修改标题，再使用.sync，同时子组件要通过事件触发更新，不要直接修改Prop：
父组件模板：

<Modal :modal-header.sync="buttonPressed.name" />

子组件修改标题的逻辑：

// 子组件内不要直接赋值this.modalHeader = '新标题'，而是触发update事件
this.$emit('update:modalHeader', '新标题')

第三步：子组件Prop规范声明 #

子组件Modal的modalHeader用@Prop装饰器正确声明，标记为只读避免误修改：

import { Prop, Component, Vue } from 'vue-property-decorator'

@Component
export default class Modal extends Vue {
  @Prop({ default: 'Header' }) readonly modalHeader!: string
}

• 如果确实需要初始buttonPressed为空，后续动态添加name属性，必须用this.$set触发响应式：this.$set(this.buttonPressed, 'name', 按钮名称)
• Prop是单向数据流，仅用于父组件向子组件传值，子组件不要直接修改Prop值，所有修改都要通过$emit通知父组件处理

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