vue 理解双向绑定v-model和调用组件为何要用v-mdel绑定

vue中绑定一个属性使用的是v-bind:指令,简写形式为:;使用该指令可以绑定data中的key,从而获取它对于的value值,但是这个绑定它是单向的,如果你元素本身修改了内容,并不会影响到data中对于的值。

在与表单的交互中只有单向绑定是不实用的,于是有了双向绑定,我们可以给一个input表单元素通过v-model双向绑定一个key,并且当我们修改input中的内容时,绑定的值也会跟着发生变化。

其原理也非常简单。

v-model绑定:

<input type="text" v-model="name" />

v-mode原理

<input type="text" :value="name" @input="name=$event.target.value" />

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

  1. 默认绑定value属性
  2. 添加input事件

当input的内容发生改变就会触发input事件,input事件再将绑定的值进行更新。

知道这两个步骤,我们就可以管中窥豹,了解到很多组件用v-model绑定数据是为什么?


组件使用v-model绑定数据

假设我们有一个子组件,名为<app-input>;它是一个用户账号的表单控件,利用v-model绑定一个name属性。

<app-input v-model="name"></app-input>
data: {
  name: ''
}

组件内部

<input type="text" :value="value" @input="setName">
props:['value'],
methods: {
  setName(e){
    this.$emit('input',e.target.value);
  }
}

组件通过props设置value接受v-model默认绑定的value属性传来的值,然后通过input事件触发setName方法,这个方法触发v-model默认绑定的input事件,并将修改的值传给它,v-model的input事件再去修改name的值。

这样就可以少些一些代码,不用每次在调用组件的html元素上写一个props,再写一个自定义事件。

以上就是关于v-model的解析。

0
  • 本文分类:vue 项目实战
  • 本文标签:v-model
  • 流行热度:已超过 89 人围观了本文
  • 发布日期:2020年03月5日 - 20时29分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

评论(0)

微信收款码
微信收款码