看使用自定义事件的表单输入组件这一节时,最初有不少困惑,反复看了几遍之后有点点眉目。
代码如下:
Vue.component('currency-input', {
template: `
<span>
$<input
ref="input"
v-bind:value="value"
v-on:input="undateValue($event.target.value)"
>
</span>
`,
props: ['value'],
methods: {
undateValue: function (value) {
var formattedValue = value.trim().slice(0, value.indexOf('.') === -1 ? value.length : value.indexOf('.') + 3)
if (formattedValue !== value) {
this.$refs.input.value = formattedValue;
}
this.$emit('input', Number(formattedValue))
}
}
})
let evt1 = new Vue({
el: '#evt1',
data: {
counter: 0,
price: 12
}
})
<div id="evt1">
<currency-input v-model="price"></currency-input>
</div>
对于这个案例来说,文档是想让我们理解,在非表单元素中如何使用v-model并实现v-model的效果。(一般来说,v-model是针对表单的)
首先讲述了v-model的原理。
<input
v-bind:value="something"
v-on:input="something = $event.target.value">
// 对于一般组件而言
<custom-input
v-bind:value="something"
v-on:input="something = arguments[0]">
</custom-input>
v-model只是一个语法糖,将某个变量绑定在value属性上,并且监听input事件。
非表单元素不能直接使用v-model的原因在于,不存在value属性和input事件,所以通常也没必要这么写。
但是当某个自定义组件内部包含表单元素时,可以通过自定义事件来模拟这种效果。(因为非表单元素不存在input事件,所以对于非表单元素来说,input就是自定义事件,可以通过this.
emit(‘input′)来触发)。自定义组件设置了v−model之后,给子组件传入了value属性,自身绑定了一个input自定义事件。然后子组件的表单元素中写bind和on:input,使用这两个而不直接使用v−model的原因在于,想在input时,对数据进行一些处理,比如格式化,比如触发父组件的input的事件。arguments[0]就是this.
e
m
i
t
(
‘
i
n
p
u
t
′
)
来
触
发
)
。
自
定
义
组
件
设
置
了
v
−
m
o
d
e
l
之
后
,
给
子
组
件
传
入
了
v
a
l
u
e
属
性
,
自
身
绑
定
了
一
个
i
n
p
u
t
自
定
义
事
件
。
然
后
子
组
件
的
表
单
元
素
中
写
b
i
n
d
和
o
n
:
i
n
p
u
t
,
使
用
这
两
个
而
不
直
接
使
用
v
−
m
o
d
e
l
的
原
因
在
于
,
想
在
i
n
p
u
t
时
,
对
数
据
进
行
一
些
处
理
,
比
如
格
式
化
,
比
如
触
发
父
组
件
的
i
n
p
u
t
的
事
件
。
a
r
g
u
m
e
n
t
s
[
0
]
就
是
t
h
i
s
.
emit时,传进去的参数。