木灵鱼儿
阅读:2255
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实际上就做了两件事:
- 默认绑定value属性
- 添加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的解析。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
vue3 v-model
在vue2的时候,v-model和.sync修饰符在职能上是一样的,容易混淆,在vue3时做了统一,为此移除了.sync修饰符,以及组件内的model选项,新增了可以多个v-model的使用方式。我们先看看vue2的v-model写法:<ChildComponent v-model="pageTitle" /> <!-- 等同于 --> <ChildComponent :value="pageTitle" @input="pageTitle = $event" />model选项export...
双向绑定和单向数据流
双向绑定和单向数据流什么是双向绑定?双向绑定指的是:数据model的更新会触发可视层的更新,而可视层的更新会触发数据model的更新。这就是v-model绑定input元素所做的事情。单向数据流单向数据流:数据model的更新触发可视层的更新,而可视层的更新和model不会有任何关系。vue的几个概念vue是单向数据流,不是双向绑定vue的双向绑定不过是语法糖Object.defineProperty是用来做响应式更新的,和双向绑定没有关系。v-model做了什么v-model默认限制只能用在:input、select、textarea、components也就是除了表单元素,还有可以用...