vue 多个父子组件的input 如何实现双向值绑定

Question

如何能实现子组件1 input 数据和 子组件2 input 数据 实现数据联动 就是子组件1里输入在子组件2里能同步，在子组件2里输入在子组件1里也能同步
现在我能把组件1数据通过父组件传递给组件2 input里 但反向就不行 请教改如何 想到用vuex 不知道是否可行

Answer 1

实际上你应该在父级定义一个数据比如

data:{
    input:{
        value:''
    }
}

这里把传递给子组件的数据改成了一个对象而不是字符串，然后两个子组件使用 props 接受一下，只是在input上写的时候改成了

<input v-model='input.value' />

这样就行了；
还有一种方法是使用 vuex，vuex是全局性的肯定是可行的

Answer 2

通过sync修饰符，组件传参加上.sync

<conponents1 :value.sync="value">
<conponents2 :value.sync="value">

组件内部直接修改父级传入的数据

this.$emit('update:value', value)

Answer 3

通常几种解决办法。

1. vuex可以的
2. 在main里面给Vue原型添加数据总线 Vue.prototype.$bus = new Vue(), 这样就能在组件实例里通过this.$bus.$emit('xxx') 来实现任意组件间的相互通信了。
3. 数据保存在公共父级组件中，使用value属性和input事件双向绑定传递给子组件。在组件结构比较清晰的时候，偏向于这种。