阿牛博客

vue双向数据绑定之sync和v-model

vue作者的大神尤雨溪的一段原话:“ Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。
另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。
在两种情况下,我们很容易忍不住想去修改 prop 中数据:
1.Prop 作为初始值传入后,子组件想把它当作局部数据来用;
2.Prop 作为原始数据传入,由子组件处理成其它数据输出。 ”
所以vue推荐的是单数据流。
其实简单点说就是:父组件通过Prop传入数据源,子组件需要改变数据源的话,子组件应该通过一个自定义事件(由vue的vm.$emit触发),告诉父组件(父组件通过一个自定义方法(订阅)来知道子组件改了自己的数据源),父组件知道后,由父组件决定是否对源数据进行改变,这样是使数据流可控(若是vue是双向数据流,多组件的时候,每个组件都去改变父组件的数据源,则父组件的数据源不可控)。
不过,一些特殊情况,又需要组件间进行双向数据绑定,如弹框里面常用到的关闭功能:父组件需要告诉弹框关闭,开启,弹框组件关闭又需要告诉父组件,于是,为了简洁、方便,作者又提供了修饰符sync和v-model两种方法支持数据的双向绑定,下面我给大家一一介绍一下:

一、作者推荐的原始发布订阅模式。

父组件-html:

父组件-js:

弹框组件:

上面的大概逻辑就是=>父组件传数据源:smallPopupOriginalShow给子组件smallPopupOriginal,子组件smallPopupOriginal里面创建一个源数据的副本newPopupShow(通过newPopupShow: this.popupShow),然后在watch里面进行两个监听:1.监听数据源popupShow,当数据源变化的时候,把变化的值给子组件的副本newPopupShow;2.监听副本newPopupShow,将变化后的值赋给一个自定义事件newPopupShow-change,由$emit发布给父组件,父组件通过一个自定义方法newPopupShowChangeListen来监听来自子组件的自定义事件newPopupShow-change(@newPopupShow-change=”newPopupShowChangeListen”),父组件通过newPopupShowChangeListen方法的参数来获取到newPopupShow-change的传来的参数,最后在newPopupShowChangeListen中决定是否改变数据源smallPopupOriginalShow。(ps:这里理解很重要,后面的sync和v-model都是这个原理。)
有的同学看了上面的例子觉得特别绕,是的,确实好绕,但是因为vue不推荐双向数据绑定,如果你强行在子组件里面执行:@click=”popupShow=false”,会直接抛出一个异常:

所以没办法,最后不得不兜了一大串,才把双向数据绑定搞定~~o(>_<)o ~~。

二、通过修饰符sync,简单的进行双向数据绑定,其实就是上面第一种发布订阅的语法糖。

sync-api:请戳这~
父组件-html:

父组件-js:

弹框组件:

下面我们来对比一二两个调用方式:

大家一眼就会发现二比一多了个.sync,少了一个父组件的监听@newPopupShow-change=”newPopupShowChangeListen”,这样看来其实就是代码变得简洁了。
对,其实作者提供的sync就是上面第一种发布订阅的的一个语法糖:

上面的1,2是等价的,其实就是这么简单…

三、用v-model方式实现双向数据绑定。

v-model-api:请戳这~
父组件-html:

父组件-js:

弹框组件:

对比一下二三两种方式:

咋一看,貌似两个也挺相似,一个是.sync,一个是v-model,然后两个都是接收一个父组件变量…
我们在看看官网上的一个v-model说明:

哈哈,是不是有点豁然开朗的感觉,其实二和三的方式是一样的,他们的原理其实都是第一种,都是发布订阅而已:

更能直观的理解,贴一下2组件的代码:

一二三,三种方法,对比对比去其实原理其实都是相通的,二三两个只是一的语法糖,平时开发的时候三个方法都可以拿来用,这里介绍一下的主要目的是让同学们用到这些东西的时候更加明白,知其然更知其所以然嘛。
本文章的例子domo => vuesyncmodel 请戳这~

给个赞() 踩一下()

温馨提示:本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知 识的误导,同时有更好的阅读体验。

本文链接: http://aniublog.com/archives/495

上一篇: 微信支付——微信相关的一些开发经验4 » 下一篇: webstorm快捷键、支持vue文件等部分使用技巧 »