为什么在watch里面修改data的值，cube的input无法进行同步
来源：1-1 导学
李行知
2018-08-07
template
<cube-input v-model="v" ></cube-input>
data () {
return {
v: ''
}
},
watch: {
v (v) {
this.v = 'zzz'
}
},包括vux里面也是会出现这种情况
https://github.com/airyland/vux/issues/2622
即。在input中输入内容后并且强行改变内容，父组件中的data会改变，子组件的props中的value会改变，但是子组件input中inputValue不会改变。导致显示内容不改变
写回答
1回答
-
因为父组件的 watcher 是先执行的，并且 user watcher 是高于 render watcher 的，而子组件(cube-input)的 watcher 去监听 value 的变化，而这个 prop 的变化是在父组件 re render 之后。所以当你第一次在 input 输入内容后，v 发生了变化为你输入的内容，然后你又在父组件的 user watcher 中把 v 改成了 zzz，所以传递给 cube-input 的 value 就是 zzz，之后你再去输入 input，还经历上述过程，传递的 prop 还是 zzz，zzz -> zzz 没有变化，所以不会触发子组件的 watcher 回调， inpuntValue 就不会发生变化。
如果想更新，就在 nextTick 后修改 this.z 即可012018-08-08
相似问题