继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

vue在自定义组件中使用v-model

Ewall_
关注TA
已关注
手记 85
粉丝 7084
获赞 266

v-model本质是什么?如何在我们写的自定义组件的使用v-model?

1、本质

  • 首先我们来看看v-model是个什么东西?

其实本质上,v-modelv-bind以及v-on配合使用的语法糖,举个例子:

<input v-model="value" />

// 就是相当于: 
<input :value="value" @input="value= $event.target.value" />

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
    子组件中

  • 最后我们就可以看到在组件上实现了值的绑定

实例效果.gif

4、其他

(1)其实在我的理解中,将v-model运用在自定义组件中实现值的双向绑定,这只不过是简化了单向数据流的操作,比如不用注册接收emit发射出来的事件函数再去改变值,减少了代码量。但是我觉得提高了维护成本,可能在例如表单组件中可以较好的运用这个特性以外,我还是宁愿麻烦一点走个完整的单项数据流,如果状态比较多就用vuex,这样可能更加直观,更好维护。

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP