vue3 自定义组件中使用 v-model
2024-10-20 20:44:28
1、直接绑定 v-model,但是 Props 要固定为 modelValue
组件D:
注意这里的 Props 和 Emits,必须使用 Vue 提供的 defineProps() 和 defineEmits()。
如果父组件想要使用 v-model 直接绑定,则需要使用与 modelValue 相同的 prop 名称和与 update:modelValue 相同的事件名称。
2、如果想为 prop 和 event 使用不同的名称,也是可行的:
组件C(2个组件一样,主要是 Props 区别):
这里的界面绑定要注意一下,需要 v-model:value 形式绑定 :
其他代码项皆类似,这里就不记录了。
3、也可以同时绑定多个 v-model:
总结:
无论直接使用 v-model ,还是 v-model:value 形式的绑定,底层都对应着需要定义 Props 为 modelValue 或 其他自定义名称,Emits 则对应着 Props 的名称并添加前缀 update:。
参考:
https://cn.vuejs.org/guide/components/v-model.html
https://devpress.csdn.net/vue/632fc951357a883f870c8be2.html
最新文章
- php 冒泡排序 快速排序
- C++浅析——虚函数的动态和静态绑定
- require,include,require_once,include_once的区别
- JQuery源码解析(十)
- WinForm设置右键菜单
- Parencodings 分类: POJ 2015-06-28 22:00 7人阅读 评论(0) 收藏
- UITabbar item 设置笔记
- linux驱动开发之GCC问题
- 用htaccess进行访问控制(转)
- servlet与CGI的区别
- maven pom.xml 中各个标签元素的作用
- ES6异步操作Thunk、co和async
- Linux文本三剑客超详细教程---grep、sed、awk
- Servlet 使用ServletContext共享数据,读取web.xml配置
- git dev 分支merge到master
- 【MySQL】【1】表中存在重复记录,删除保留其中一条
- javascript本地,宿主,内置对象
- 网线/双绞线上各标识CAT, AWG, PR, UTP/STP/FTP/SFTP的含义
- Reconstruction(三维重建)文件被修改
- Python进程、线程、协程及IO多路复用