
vue 官方文档 - 自定义事件
发布日期:2022-02-17 02:39:49
浏览次数:17
分类:技术文章
本文共 629 字,大约阅读时间需要 2 分钟。
1. 自定义事件
1.1. 自定义组件的 v-model
首先,一个组件的 v-model 默认会利用一个名为 value 的 prop 接 input 的事件,如下所示:
但是,某些情况下,比如输入框是 checkbox 等,就无法得到我们想要的双向绑定了,因此可以通过下面的方式来解决:
1.2. 原生事件绑定到组件
问题就不描述了,自己跑一下官方代码发现确实无法聚焦,解决办法如下:
1.3. 事件名
事件名不同于 prop 和 变量名
,而是触发的事件名需要 完全匹配
监听这个事件所用的名称,所以要求 emit 和 监听时写得一致,推荐如下写法:
// Son.vuethis.$emit('my-event')// Father.vue@my-event="myEvent"
1.4. .sync
有时候需要对 prop 进行双向绑定,也就是子和父组件都可以改变这个 prop,具体用法如下:
🍎.sync 修饰的 v-bind 不能和表单时一起用,如 v-bind:title.sync=“title”
当传递的 prop 是个对象,而且多个值都需要双向绑定,可以使用如下方法:
🍎Father.vue 这里无法传一个字面量对象:{ name:‘xx’, age: 0 }
转载地址:https://blog.csdn.net/qq_39811414/article/details/117431116 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
很好
[***.229.124.182]2023年06月03日 12时29分21秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
最新文章
上传项目到SVN分支
2019-09-06 22:50:21
数据加密-怎样确定RSA Key 的长度
2019-09-06 22:50:21
monkey script相关试用说明
2019-09-06 22:50:20
Linux下端口被占用解决
2019-09-06 22:50:19
chrome DevTool For Improving web app performance
2019-09-06 22:50:19
Linux远程连接另一台linux的方法
2019-09-06 22:50:18
web.py学习记录
2019-09-06 22:50:18
Android4.4 browser 渲染架构分析
2019-09-06 22:50:17
关于Android的DEX文件
2019-09-06 22:50:17
手工测试与成就感
2019-09-06 22:50:16
脚本处理iOS的Crash日志
2019-09-06 22:50:16
java 数组的协变和逆变
2019-09-06 22:50:15
洛谷 P1342 请柬 最短路+Dijkstra算法
2019-09-06 22:50:15
ASP.NET WebApi 自带Json返回日期带T无法格式化的问题
2019-09-06 22:50:14
android监听屏幕底部导航栏和输入法的显示
2019-09-06 22:50:14
android自定义圆角按钮,点击实现背景和文字颜色同时变化
2019-09-06 22:50:13
Android连接USB打印机
2019-09-06 22:50:13
android通过USB读取身份证信息
2019-09-06 22:50:12
手动模拟EventBus框架
2019-09-06 22:50:12
RxJava学习总结(一)
2019-09-06 22:50:11