Vue 子组件双向绑定父组件数据对象内部多个属性，应该用什么方式实现？

[ignor]

假设父组件数据对象 parentData 的结构为:

{
  a: xxx,
  b: yyy,
（后续会添加其他属性）
}

现在需要写一个可以编辑 parentData 的 component ，能像这样使用：

<EditorComponent v-model:parent-data="parentData"/>

在 EditorComponent 里，有两个 input 可以修改 a 、b 这两个属性。由于子组件不能直接修改父组件的数据，emit update 又只能对 parentData 做整块的赋值，所以目前的思路如下

先在 EditorComponent 内部复制一份 dataCopy：

data: {
  dataCopy = null
},
watch: {
  parentData: {
    deep: true,
    handler: function (val) {
      this.dataCopy = val
    }
  }
}

然后有两种处理方式：

1.
两个 input 绑定 dataCopy 的数据：

<input v-model="dataCopy.a"/>
<input v-model="dataCopy.b"/>

这样的话，如果要更新 parentData ，得在 dataCopy 上加一个 watcher ，然后

this.$emit('update:parentData', val)

但这似乎是不可取的，会造成来回无限更新

2.
把 input 的 v-model 拆开，加两个方法 updateA 、updateB：

<input :value="dataCopy.a" @input="updateA"/>
<input :value="dataCopy.b" @input="updateB"/>

然后在每个 update 里把 event 的值先赋给 dataCopy ，再

this.$emit('update:parentData', this.dataCopy)

这样属性一多就很麻烦很臃肿了

所以实现这样一个 EditorComponent 的规范思路应该是怎样的？（只看了基础教学就上手做了，不知道是否漏掉了什么重要概念……）

[cuicuiv5]

用 vuex

[ignor]

@leadfast 你这里 myData=props.parent ，似乎不会对 parent 的变化做出响应，所以没有死循环，得用两个 watcher 才能实现双向的响应吧

[ignor]

@Manweill 第一次尝试响应式框架，为了好上手选了 Vue ，所以这是……踩了坑了？ react 是怎么规避这种问题的呢？

[ignor]

@cuicuiv5 这是不是有些重了…

[ignor]

@leadfast 补充一下，是对父组件里 parentData 这个对象的改变没有响应

[ignor]

@ignor #22 刚才又试了下，原来是因为在 watcher 里对新值做了改动才导致死循环……没事了

[Manweill]

@ignor react,,,没有这问题，react 基本是单向数据流模式

[Garwih]

正确的方法是用 computed ，get 的时候 return parentData ，set 的时候 this.$emit('update:parentData', value)。
并不需要 watch 。

[dog82]

我建议 vuex

[ShayneWang]

https://github.com/developit/mitt

[umaker]

1. 使用 slot 实现
2. 使用一个状态管理工具

为了做到不直接修改对象类型的 prop ，搞一堆 emit 和 watch ，我觉得挺闹心的。

[vanillacloud]

是否会觉得你的 model 在设计上就跟 Vue 的理念有所不同，导致做起来觉得各种麻烦？

我觉得思考一下「 Vue 建议怎么做这样的事」比较好。就像刚才你问「 react 怎么处理这类问题」，别人会说「 react 一般单向，没这个问题」。

有没有可能 Vue 其实也是这个答案？

我不是 expert ，但一般做的时候都是 #28 @Garwih 那样的处理方式。这似乎也是 Vue document 的方法。有什么情况是不能这样解决的吗？

当你觉得你的情况很复杂的时候，是时候回头想一想 data model / structure 的设计。

[ignor]

@vanillacloud #28 的问题我在#8 已经提到了，主楼的问题在#26 也解决了，主楼里方案 1 的做法其实可行，是我在 watcher 里加了赋值导致的死循环

[kevin1]

子组件维护自己的 input ，change 事件触发的时候拿到 value ，$emit 通知父组件（传递要修改的 key 和 value ）直接修改 parentData 对应的 key ？

[ignor]

@kevin1 我帖子里没提到，a b 这些属性内部的结构也是不确定的，例如 a 可能是由数组构成的一串 input ，你的这个办法似乎需要针对不同的结构写不同的 emit

[cjd6568358]

v-bind.sync?

[encro]

找到现实中一个类似的功能，然后看它怎么实现的，研究 2-3 个后，思考下他们的适用场景，选择合适的。

这个有非常多类似案例，比如嵌套 select ，modal, richtext editor 。。。