v-model本质是什么?如何在我们写的自定义组件的使用v-model?
1、本质
首先我们来看看
v-model
是个什么东西?其实本质上,
v-model
是v-bind
以及v-on
配合使用的语法糖:
<input v-model="test" />
// 就是相当于:
<input :value="test" @input="value= $event.target.test" />
2、model选项
(1)由上面可以知道v-model
的本质是什么,那么我们如何在自定义组件上使用v-model
呢?首先要了解model这个选项。
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
(2)结合第一点的代码概括起来是个什么意思呢?就是说,本来默认是这样的:
- 子接收到的
prop值
=value
- 监听子组件触发的
事件名event
=input
(3)我们要在自定义组件上用啊,老是用默认的那岂不是限制了我的发挥?于是,vue在2.2.0
版本中新增了一个model
选项,可以让我们这样:
- 子接收到的
prop值
="想什么值就什么值"
- 监听子组件触发的
事件名event
="想什么事件名就什么事件名"
(4)还是有点蒙?没关系,实践才是检验真理的唯一标准嘛,我们来用实例跑一下,看看怎么用,不过在这之前,你得先理解父子组件中的传值、单项数据流是怎么一回事。
3、使用实例
-
父组件中使用
v-model
-
子组件中的model选项就做了前面所说的事情:接收到的prop就是
text
,定义绑定监听的事件名就是onEmitFromChild
。
最后我们就可以看到在组件上实现了值的绑定
- 好的,到了这里我们为了加深理解同时也是为了响应开头,达到一波首尾呼应的强烈文章效果,,,,在子组件中(父组件不用动),我们注释掉
model选项
,使用默认的方式,这样应该你能更好的再次理解v-model
的本质。(效果跟上面的gif是一样的)
其实本质上,
v-model
是v-bind
以及v-on
配合使用的语法糖。
默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。
4、其他
其实在我的理解中,将
v-model
运用在自定义组件中实现值的双向绑定,这只不过是简化了单向数据流的操作。但是这种写法可读性不好,可能在例如表单组件中可以较好的运用这个特性以外,还是建议宁愿麻烦一点走个完整的单项数据流,如果状态比较多就用
vuex
,这样可能更加直观,更好维护。