Vue中如何正确迭代更新Props的属性

嘿，我来帮你拆解这个问题～

一、为啥直接改对象属性没触发Vue警告？ #

Vue对Prop的警告逻辑是检测你是否直接重新赋值了Prop变量本身（比如this.globalStates = { repeat: true }这种直接替换整个对象的操作）。但如果Prop是对象/数组这种引用类型，你修改它的内部属性（比如this.globalStates.repeat = true），Vue不会抛出警告——因为你只是修改了引用指向的内存内容，并没有改变this.globalStates这个变量本身的引用地址。

不过这其实是Vue的「灰色地带」，属于不推荐的反模式：违背了单向数据流原则，父组件完全不知道子组件偷偷修改了Prop的内部属性，很容易出现数据不一致、调试困难的问题。

二、你尝试的$emit写法为啥失败？ #

你写的这段代码有个明显的问题：

const u = 'update:' + object + '.' + item
this.$emit(u, loadedObject[item] )

这里的object是一个实际的对象（比如this.globalStates），当你把对象和字符串拼接时，JS会把对象转成字符串[object Object]，最终事件名会变成update:[object Object].repeat，这显然不是一个有效的事件名，自然无法触发父组件的监听。

三、正确的实现方式 #

根据Vue的单向数据流原则，子组件不能直接修改Prop，必须通过$emit通知父组件来更新数据。这里分两种场景给出方案：

方案1：批量更新整个对象（推荐） #

如果你的需求是把localStorage里的所有属性覆盖到Prop对象上，最简洁的方式是emit整个更新后的对象：

子组件代码

mounted(){
  this.loadLocalData(this.globalStates, "states", "globalStates")
  this.loadLocalData(this.globalSettings, "settings", "globalSettings")
},
methods: {
  loadLocalData(targetObject, storageKey, propName){
    const loadedData = JSON.parse(localStorage.getItem(storageKey))
    if (loadedData && typeof loadedData === "object"){
      // 合并原有属性和本地存储的属性，避免覆盖未在localStorage中定义的属性
      const updatedData = {...targetObject, ...loadedData}
      // 触发更新事件，告诉父组件要更新对应的Prop
      this.$emit(`update:${propName}`, updatedData)
    }
  }
},

父组件代码

在父组件中监听对应的更新事件，更新自己的数据源：

<YourComponent
  :global-states="globalStates"
  :global-settings="globalSettings"
  @update:global-states="newStates => globalStates = newStates"
  @update:global-settings="newSettings => globalSettings = newSettings"
/>

如果是Vue 3，还可以用v-model语法糖简化：

<YourComponent
  v-model:global-states="globalStates"
  v-model:global-settings="globalSettings"
/>

Vue 3会自动把v-model:xxx解析为:xxx="xxx"和@update:xxx="xxx = $event"，非常方便。

方案2：单个属性独立更新 #

如果你需要更精细地控制每个属性的更新，可以逐个emit属性的变更：

子组件代码

loadLocalData(targetObject, storageKey, propName){
  const loadedData = JSON.parse(localStorage.getItem(storageKey))
  if (loadedData && typeof loadedData === "object"){
    for (let key in targetObject){
      if (loadedData.hasOwnProperty(key)){
        // 触发单个属性的更新事件，事件名可以自定义
        this.$emit(`update:${propName}.${key}`, loadedData[key])
      }
    }
  }
}

父组件代码

监听每个属性的更新事件：

<YourComponent
  :global-states="globalStates"
  @update:global-states.repeat="val => globalStates.repeat = val"
  @update:global-states.shuffle="val => globalStates.shuffle = val"
  <!-- 其他属性同理 -->
/>

这种方式适合需要单独处理某个属性更新逻辑的场景，但代码量会大一些。

额外建议：子组件用本地副本过渡 #

如果你的子组件需要在本地临时修改这些状态（比如在用户操作时先修改本地值，最后再同步给父组件），可以在子组件的data里创建Prop的副本：

data(){
  return {
    localStates: {...this.globalStates},
    localSettings: {...this.globalSettings}
  }
},
mounted(){
  const loadedStates = JSON.parse(localStorage.getItem('states'))
  if (loadedStates){
    this.localStates = {...this.localStates, ...loadedStates}
    // 初始化时同步给父组件
    this.$emit('update:globalStates', this.localStates)
  }
}

这样子组件内部操作的是自己的localStates，完全符合单向数据流，也更便于调试。

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