• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

双向绑定和单向数据流

双向绑定和单向数据流

什么是双向绑定?

双向绑定指的是:数据model的更新会触发可视层的更新,而可视层的更新会触发数据model的更新。

这就是v-model绑定input元素所做的事情。

单向数据流

单向数据流:数据model的更新触发可视层的更新,而可视层的更新和model不会有任何关系。

vue的几个概念

  1. vue是单向数据流,不是双向绑定
  2. vue的双向绑定不过是语法糖
  3. Object.defineProperty是用来做响应式更新的,和双向绑定没有关系。

v-model做了什么

v-model默认限制只能用在:input、select、textarea、components

也就是除了表单元素,还有可以用在组件上。

v-model实际上做了两件事:

  1. 默认绑定value属性
  2. 创建一个input事件,用于更新value
<input v-model="value" />

可以看成是

<input :value="value" @input="val=> (value=val)" />

vue会自动创建一个事件通过事件回调的方式更新数据,这就是所谓的双向绑定。

组件中的v-model

组件A

<template>
  <div>
    <select :value="phoneInfo" placeholder="区号"
      @change="handleAreaCodeChange">
      <option value="+86">+86</option>
      <option value="+60">+60</option>
    </select>
  </div>
</template>
<script>
export default {
  model: {
    prop: "phoneInfo", // 默认 value
    event: "change" // 默认 input
  },
  props:{
    phoneInfo: String,
  },
  methods:{
    handleAreaCodeChange(e){
      this.$emit("change",e.target.value)
    }
  }
}
</script>

调用组件

<template>
  <a v-model="value" />
</template>

可以看到组件上有一个model属性,他是一个对象,有两个属性:

  1. prop:表示要v-model默认要绑定的属性名,属性是props设置的,但是因为用了v-model,所以不用显式写出来
  2. event:表示v-model默认生成什么自定义事件来触发更新,比如我设置一个event:"aabbccc",那么如果我要更新这个v-model绑定的数据,必须要emit触发这个指定的事件this.$emit("aabbcc",参数)

这样的话我们可以在自定义的任何函数里进行更新了,不必局限于元素给定的事件方法。

sync修饰符

v-model很好用,因为他缩减了我们书写的代码量,如果让你手动写一个事件更新的函数,那肯定头大,但是一个组件往往只能拥有一个v-model,所以,出现了sync修饰符。

sync就不多说了,本博客搜索sync就可以找到对应的文章。

sync实际上就是v-model的一个另一种存在形式,他的原理和v-model完全是相同的。

0
  • 本文分类:vue 开发实战
  • 本文标签:vuev-model双向绑定单向数据流sync
  • 流行热度:已超过 136 人围观了本文
  • 最后更新:2020年11月12日 - 23时42分05秒
  • 发布日期:2020年11月12日 - 23时42分05秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码