v-model语法糖

v-model语法糖

<input v-model="aaa" />

等价于


<input :value="message" @input="message = $event.target.value">

这个是文档自己说的。

当你写v-model时,就意味着你写了一个:value并且监听了@input事件

所以我们自己封装的input组件时,如果也想支持v-model这种双向绑定的话。

调用者直接用v-model

封装者,需要做的事情,就是接受value这个prop,
并且在原生的input事件触发时,触发我们自己的input事件,并且把参数传递出去

$emit(‘input’,value)

那么剩下的按说需要调用者用$on监听input吧,但由于v-model做了这件事,所以省去这部分代码

    原文作者:Ziwei
    原文地址: https://segmentfault.com/a/1190000015965219
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞