资讯专栏INFORMATION COLUMN

v-model语法糖

J4ck_Chan / 3265人阅读

摘要:语法糖等价于这个是文档自己说的。当你写时,就意味着你写了一个并且监听了事件所以我们自己封装的组件时,如果也想支持这种双向绑定的话。

v-model语法糖

等价于

这个是文档自己说的。

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

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

调用者直接用v-model

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

$emit("input",value)

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96826.html

相关文章

  • 父子组件传值及v-model实现通信

    摘要:子组件也属于当前实例。监听钩子函数的场景使用的不多,但是还是要知道的。可以获取到父组件传递的除和外的所有自定义属性。 一. 父组件向子组件传值 创建parent和child组件,并在parent中注册child组件 在父组件调用子组件标签中添加一个自定义属性(msg), im...

    lwx12525 评论0 收藏0
  • v-model

    摘要:用法中比较基础的用法是在表单控件中,创建双向数据绑定,能够更新数据并负责监听用户的输入事件实例代码这里是监听了输入框的事件,并将其赋值给。找到的父组件就是组件,里面没有注册任何方法只是了属性。因为在也是利用了的语法糖。 Vue v-model 用法 vue 中v-model 比较基础的用法是在表单控件中,创建双向数据绑定,能够更新数据并负责监听 用户的输入事件 实例代码 ...

    RiverLi 评论0 收藏0
  • 如何写好一个vue组件,老夫的一年经验全在这了

    摘要:比如很好用的拖拽库控制元素是否被拖动的行为。仅仅负责引入以及个人喜好把一个元素当做不可见的包裹元素,并在上面使用。你有什么写组件的独特技巧,不妨在评论区告诉我吧 一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop、事件和插槽: prop 允许外部环境传递数据给组件 event 允许从组件内触发外部环境的副作用 slo...

    187J3X1 评论0 收藏0
  • Vue 中实现双向绑定的 4 种方法

    摘要:一般我们会这样做完善个人信息尊姓大名确认取消写一两个组件还好,组件规模一旦扩大,写双向绑定真能写出毛病来。 1. v-model 指令 上例不过是一个语法糖,展开来是: 2. .sync 修饰符 这也是一个语法糖,剥开来是: my-dialog 组件在 visible 变化时 this.$emit(update:visible, newVisible) 即可。 3. model...

    WrBug 评论0 收藏0
  • vue总结系列--组件化

    摘要:触发事件可以携带数据,这些数据被用于传递给绑定了事件的其它组件的回调函数上,进而被传递给其它组件。父组件可以在回调函数里做任何事情,颇有灵活性。一般情况下,父组件会在回调函数中更新自己的状态数据。 上一篇博文梳理了vue的数据驱动和响应式相关的特性,这一篇博文就来梳理vue的一个很重要的特性,组件化。自定义组件之于vue,其意义不亚于函数之于C,java之类的编程语言。函数是计算机科学...

    cuieney 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<