双向绑定和单向数据流

什么是双向绑定?

双向绑定指的是:数据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-modal="value" />
</template>

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

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

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

事实上model是有默认值的:

export default {
    model:{
      prop:"value",
      event:"input"
    }
}

默认情况下model的prop指向的是value属性,这个value可以是props中设置的value,也可以data中的value,反正这个value是this上下文可以获取到的。甚至绑定在input元素上,value就是value属性。

event默认是input,表示input事件触发,这个input就是input元素的input事件。

所以,如果我们想省点事,我们可以直接给组件使用v-model双向绑定一个值,然后在组件内,通过props的value接收传递过来的数据,然后再通过$emit("input","xxxx")来触发更新。

当然,为了更好的语义化,我建议是在model中自定义一下,取一个合理的事件名,绑定到合理的数据名称上。

sync修饰符

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

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

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

分类: vue 开发实战(完结) 标签: vuev-model双向绑定单向数据流sync

评论

暂无评论数据

暂无评论数据

目录