Vue：确保组件无法修改prpos（即使它是参考对象）？

Question

我知道vue模型是道具的单向数据流。但是，当prop是参考对象时，组件可以直接修改其属性。这是错误的，但是vue不会对其进行检查。我希望有一种机制可以确保组件不能修改prpos（即使它是参考对象），而不是由开发人员检查。

Answer 1

找不到现有重复项，所以这是一个答案。如果有人可以找到一个，请告诉我，我将其设为社区wiki。

---

使用带有getter和setter的计算属性来表示您的v-model值。

getter从prop获取值，而setter向父级发出新值。

例如

<input v-model="computedProp">

props: ['referenceObject'],
computed: {
  computedProp: {
    get () {
      return this.referenceObject.someProperty
    },
    set (val) {
      this.$emit('updated', val)
    }
  }
}

和在父​​母中

<SomeComponent :reference-object="refObject" @updated="updateRefObject">

data: () => ({ refObject: { someProperty: 'initial value' } }),
methods: {
  updateRefObject (newVal) {
    this.refObject.someProperty = newVal
  }
}