成都网站建设设计

将想法与焦点和您一起共享

vue指的是单项数据流还是双向数据流

这篇文章给大家分享的是有关vue指的是单项数据流还是双向数据流的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联建站主要从事做网站、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务武安,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

vue是单项数据流。虽然vue有双向绑定“v-model”,但是vue父子组件之间数据传递,仍然还是遵循单向数据流的,父组件可以向子组件传递props,但是子组件不能修改父组件传递来的props,子组件只能通过事件通知父组件进行数据更改。

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

双向绑定

简而言之,双向绑定就是model的更新会触发view的更新,view的更新会触发model的更新,它们的作用是相互的
[图片上传失败...(image-81a06f-1556975918443)]

单向数据流

简而言之,单向数据流就是model的更新会触发view的更新,view的更新不会触发model的更新,它们的作用是单向的

vue指的是单项数据流还是双向数据流

这不是废话吗,谁都知道的

下面就是真正的干货了,板凳坐好

  • Vue是单向数据流,不是双向绑定
  • Vue的双向绑定不过是语法糖
  • Object.definePropert是用来做响应式更新的

v-model的实现原理

  • 放在组件上

父组件

  

子组件

父组件的写法等同于

  (phoneInfo = val)"
    :zip-code="zipCode"  @update:zipCode="val => (zipCode = val)"/>
  • 放在input元素上

其实上文已经体现了


 { PhoneInfo.phone = val }"

以上两句是相等的

TIPS

model 2.2.0+

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

.sync修饰符 2.3.0+

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。

感谢各位的阅读!关于“vue指的是单项数据流还是双向数据流”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


文章标题:vue指的是单项数据流还是双向数据流
地址分享:http://chengdu.cdxwcx.cn/article/ghggog.html