Vue2.0中怎么实现数据的双向绑定-创新互联

这篇文章给大家介绍Vue2.0中怎么实现数据的双向绑定，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联云计算的互联网服务提供商,拥有超过13年的服务器租用、川西大数据中心、云服务器、虚拟空间、网站系统开发经验，已先后获得国家工业和信息化部颁发的互联网数据中心业务许可证。专业提供云主机、虚拟空间、空间域名、VPS主机、云服务器、香港云服务器、免备案服务器等。

实现组件双向数据绑定

在上一节中最后的示例使用的是Vue 1.0版本中的 .sync 实现数据双向绑定。那我们先来看看抛弃 .sync 修饰符来实现组件双向数据绑定的工作：通过Vue提供的机制，绕开直接修改 prop 来实现组件双向数据绑定。

其思路大致是这样：

在数据渲染时使用 prop 渲染数据
将 prop 绑定到子组件自身的数据上，修改数据时修改自身数据来替代 prop
watch 子组件自身数据的改变，触发事件通知父组件更改绑定到 prop 的数据

这样做的好处是：父组件数据改变时，不会修改存储 prop 的子组件数据，只是以子组件数据为媒介，完成对 prop 的双向修改。

继续拿上一节的示例来举例，只不过接下来的示例，并没有使用 .sync 来实现双向数据绑定的效果。

修改的代码如下：


 
  父组件Parent数据
  
   
    姓名:
    {{ name }}
    
   
   
    年龄:
    {{ age }}

name = val" @update:my-age="val => age = val">

子组件child数据

姓名 {{ myName }}
年龄 {{ myAge }}

在上面的这个示例中，我们并没有使用 .sync 修饰符，但在调用子组件的时候使用了 @update ：

子组件中渲染到HTML模板的数据是用的 prop 数据，但监听 input 是使用的子组件自身定义的数据作为 v-model 。这样一来就不会直接修改 prop 。简单来说，一切 prop 的改变从本质上来说都由父组件完成。JavaScript的代码如下：

上面的示例效果，不管是修改父组件的数据还是子组件的数据，都会相互影响：

因为子组件中 props 的 myName 和 myAge 不可写，所以在 data 中创建一个副本 childMyName 和 childMyAge 。初始值为 props 属性 myName 和 myAge 的值，同时在组件内所有需要调用 props 的地方调用 data 中的 childMyName 和 childMyAge 。

接下来在子组件中通过 watch 来对 props 属性的 myName 和 myAge 进行监听。当 props 修改后对应 data 中的副本 childMyName 和 childMyAge 也要同步数据。

接下来要做的事情就是当组件内的 props 属性发生变化时，需要向组件外（父组件）发送通知，通知组件内属性变更，然后由外层（父组件）自己来决定是否变更他的数据。

至此，实现了组件内部数据与组件外部的数据的双向绑定，组件内外数据的同步。简而言之：组件内部自已变了告诉外部，外部决定要不要变更。

事实上，在Vue中，双向绑定的 props 是不利于组件间的数据状态管理，尤其是较为复杂的业务当中，因此在实际项目中应该尽量少用双向绑定，过于复杂的数据处理，建议使用 Vuex 。但很多时候又避免不了使用双向绑定。那么什么场景之下使用 props 来做双向绑定呢？

如果在你的项目中，同时满足下面的条件时，我们就可以考虑使用 props 来做双向绑定：

虽然上面的示例展示了我们怎么在Vue 2.0中实现 props 的双向绑定，但如果项目中有更多这样的双向绑定，那么就会让你做一些重复的事情，而且代码也很冗余，事情也会变得复杂。为了改变这样的现象，可以借助Vue的 mixin 来自动化处理 props 的双向绑定的需求。不过在这节中，我们不会学习这方面的知识，后面我们在学习 mixin 时，可地再回过头来实现这样的功能。

关于Vue2.0中怎么实现数据的双向绑定就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

重庆分公司，新征程启航

Vue2.0中怎么实现数据的双向绑定-创新互联

父组件Parent数据

子组件child数据

其他资讯