关于 v-model
在 vue 开发开发中, v-model 是一个非常常用的属性.
常规模式下,我们给定当前组件的某个 data 属性值,并设置 v-model 到对应的 表单元素 的属性上.
这样就建立了 input 表单元素和 data 数据的双向绑定了.
<div id="app">
<input type="text" v-model="userName" />
</div>
<script>
new Vue({
el: '#app',
data: {
userName: ''
}
})
</script>
这个时候:
- 我们在 input 文本框里修改 value 值,会影响 userName 这个 data 属性.
- 我们在代码逻辑中,修改 this.userName = 'xxxx' 也会影响到 input 的 value 值.
原理也很简单.
- data里的userName,被 Object.defineProperty() 定义后,具备了 set/get 的监听器.
- input 元素本身就有 input 事件,能监听自己的 value 值修改.
- 在对应的自己修改的时机里,修改对方的值即可.
image.png
也就是说,当我们使用 v-model 指令时,这个指令实质上帮我们做了两件事情:
- 将对应的 data 属性 userName 绑定到 Dom.value 上.由于 data.userName 有 set,当值修改的时候,会同步更新 DOM.value
- 被绑定的 DOM 元素会发布 @input 事件,当前组件根根据这个 input 来获取最新的 DOM.value 并同步被绑定的 data.userName
v-model 到底是怎么做的?
现在不使用 v-model 指令,而是利用上述得出的规律,手动的完成 v-model 的特性.
HTML 部分
<div id='app'>
<!-- v-model 等价于下面这段HTML -->
<input type="text" v-model="userName" />
<!-- v-model做的事情. -->
<input type="text" :value="userName" @input="hanlderInputClick" />
</div>
JavaScript 部分
var app = new Vue({
el: '#app',
data: {
userName: '李四'
},
methods: {
// 我们在使用 v-model 时 会我们隐式添加这个事件响应方法.
hanlderInputClick (e) {
this.userName = e.target.value
console.log(this.userName)
}
},
})
- 首先在 input 元素中,我们使用
:value='userName'建立了 data -> dom 之间的单向数据流动关系.这样在 data 属性发生改变时(监听到 set),就可以同步的修改 input 的 value 值了. - 其次,我们在让 input 元素发布 input 事件,并让组件提供事件响应方法. 建立了 dom -> data 直接单向数据流动的关系. 这样,input 元素才发生 value 的 change 时,能同步的修改 data 里的值. dom -> data
所以, v-model 指令,就帮我们做了两件事情.
- 利用 :value="data" 建立 data -> dom 的流动关系.
- 利用 @inutput 建立 dom -> data 的流动关系.
于是数据的双向流动关系就打通了.
所以 v-model="userName" 等价于 :value="userName" & @input="hanlderInputChange".(@input 事件监听以及 handlerInputChange 是 vue 在后帮我们自动提供的)
将数据绑定到 dom 上,并提供 dom 的@input 事件.
关于组件间的 v-model
根据上述内容,我们已经知道了 v-model 无非就是做了两件事情.
- 属性绑定到对应的 input
- 对应的 input 像外发布 @input 事件.
第一点什么好说的. 属性绑定任何元素可组件都可以非常方便的执行.
关键在于第二点,像外发布 @input 事件.
为什么 v-model 不能绑定在 DIV,p,<img /> .... 上 ?
常规情况下,这些元素都这是用于容器,或者展示静态文字和图片的 HTML 元素.
它基本不具备用户交互(这里的交互指的是编辑和修改)的功能(没有数据修改)
同时,它们也不具备类似 @input 事件. (即使有数据修改,也不能发布出来)
数据只能是单项的,从 data -> div,p, img.
所以我们现在知道了 v-model 一个非常重要的前提:
被绑定的元素必须包含可以变化自身数据 & 以及能将这种变化传递出去的能力.
那在组件上使用 v-model 是想表达什么意思呢?
组件是什么?
组件就是一个 js 对象.
里面包含一个数据,方法,以及最重要的 template 模板(render).
我们肉眼能看到的组件,就是 template 里的 HTML 模板外加一个数据展示.
那如果,我们在组件上使用 v-model ,对于这个组件来说,意味着什么呢?
查看下面这段代码
<div id='root'>
<child v-model="parentData"></child>
</div>
- 首先 parentData 是 顶层 root 组件的一个 data 属性.
- 接着在 child 组件标签上设置了 v-model='parentData'
在视觉上,就好像我们给一个 input 元素设置了 v-model 一样.
但是问题是:
- 在 input 元素,它有一个位置可以显示这个 parentData, 一般是 value 值.
- 第二个,input 元素有 @input 事件,可以将自身 value 的改变,同步到 parentData 上.
在组件上写 v-model 是个什么鬼??
首先,不管是什么鬼.
我们在组件上写 v-model 并传递了数据 parentData.
主要的目的之一,肯定是希望在将 root 组件的 parentData 传递到 child 组件内部的.
那 child 组件内部如何去接受这个 parentData 这个值呢?
官方文档介绍说:
在组件上使用 v-model 会默认的设置到组件的 props 中名为 value 的属性值上.
根据上述说明,在组件上使用 v-model 可以等价于.
<div id='root'>
<!--<child v-model='parentData'></child>-->
<!--等价于-->
<child :value='parentData'></child>
</div>
<child :value='parentData'></child>???
这不就是父组件向子组件传递数据的 props 语法么?
Vue.component('child',{
props:['value']
template: `<h1>{{value}}</h1>`
})
这样,在组件上使用 v-model 将数据从 root -> child 就已经打通了.
<div id='app'>
<p>一般v-model在常规的情况下,我们是用作于input表单元素的</p>
<input type="text" v-model="userName" />
<!-- v-model到底做了什么事情? -->
<!-- <input type="text" :value="userName" @input="hanlderInputClick">
<button @click="hanlderClick">getUserName</button> -->
<p>当一个v-model作用与一个组件的时候,到底代表的是什么意思?</p>
<comp-one v-model="userName"></comp-one>
</div>
let CompOne = {
props:['value'], //v-model 等价于 :value='parentData' 所以这里写的是 value
data () {
return {
msg: '我是compone组件'
}
},
template: `<div @click="hanlderClick">
<label>{{msg}}</label>
<input type='text' :value="value" />
</div>`
}
image.png
到目前为止,v-model 的数据从父组件传递到了子组件,且可以在子组件内部通过 props 在任意元素上去显示了.
但是数据流动只是单向的,从父组件传递到了子组件.
怎么才能在子组件中的数据修改之后,能够会传到父组件呢?
对于不可编辑修改以及没有往外发布变动实际的 span 来说,肯定是没戏了.
那如果我们利用组件内的那个 input 元素的事件呢?
let CompOne = {
props:['value'], //v-model 等价于 :value='parentData' 所以这里写的是 value
data () {
return {
msg: '我是compone组件'
}
},
template: `<div>
<label>{{msg}}</label> <br />
一个可以发布 input 事件的元素:<input type='text' :value="value" @input="hanlderClick" /> <br/>
一个普的 span 标签,没有 input 事件: <span>{{value}}</span>
</div>`,
methods: {
// 让组件内的 input 元素,往外发布 input 事件.
hanlderClick (e) {
this.$emit('input',e.target.value)
}
},
}
查看结果:
image.png
结论
- 在组件上使用 v-model ,会默认将这个值以 :value 的形式传递到组件的 props 上.
- 我们在组件的内部,仍然需要自己拿到这个 props.value 在使用.
- 一般使用到 input 元素上,可以在组件内部发布一个当前表单元素的 input 事件到外部.
- 外部组件会默认的帮我们注册 input 事件的响应函数,并同步更新 v-model 传递过去的数据.
未完待续......
