在Vue中,我们都知道v-model是用来双向绑定数据的,那么它的具体工作原理是什么呢?

其实v-model指令是一个prop:value和event:input组合使用的语法糖,下面是通过render函数实现的v-model效果

createElement 中的domProps选项是DOM的属性,代表我创造的input输入框value值的来源,

                           on:选项是自定义事件监听器   (即:监听当输入时,我要更新数据里面的value值,需要注意的是this的作用域)

最后在创建一个p元素显示当前实例的value值,在浏览器观察组件的value值是否改变                 

效果如下:

 

Logo

前往低代码交流专区

更多推荐