主要介绍了Vue使用.sync 实现父子组件的双向绑定数据,需要的朋友可以参考下

1.前言 最近在vue 项目中有一个需求， 就是我需要根据不同的类型在页面中放不同的组件， 组件需要跟当前页面的数据进行双向绑定，如果都写在同一个页面 代码会显得比较多，毕竟我当前页面已经7-800行代码了 所以我需要把一些元素定义成组件 ，封装起来，所以就会遇到 数据的传值绑定问题 2.父组件 首先我们来看看官方文档 [ https://cn.vuejs.org/v2/guide/components.html#sync-修饰符 ] .sync 修饰符所提供的功能。当一个子组件改变了一个 pr

思路 实现该组件有两个思路，一个使用v-model进行双向绑定，一个是使用prop的.sync修饰符、父子组件通信。 1.v-model形式 v-model的实现需要在自定义组件中自定义一个inputvalue值，因为vue中的父子组件传递机制问题，在组件中直接修改props注入的key字段时，vue会给出错误。子组件中定义inputvalue字段，用于子组件中input元素的值的双向绑定，子组件中的input数据绑定可以使用v-model，也可以使用实现v-model的原理语法糖，下面两种方式