vue实现子组件与父组件双向数据流,避免直接修改值而导致的错误

这里以input做示例:

父组件代码:







子组件代码:





这里做一下总结:我们从父组件通过v-model双向绑定值到子组件(inputDIY)中,那我们为什么不直接在子组件v-model双向绑定父组件传输过来的值呢?这是因为所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。总之就是子组件不能直接修改父组件中的值,但是可以通过自定义事件告诉父组件,这个值是否要进行更新,这里使用computed计算属性就可以变向的实现子组件与父组件之间的双向数据流

你可能感兴趣的:(vue实现子组件与父组件双向数据流,避免直接修改值而导致的错误)