Vue:自定义v-model数据双向绑定
发布日期:2021-07-01 06:06:40
浏览次数:3
分类:技术文章
本文共 610 字,大约阅读时间需要 2 分钟。
示例
age 数据单向绑定
name 数据双向绑定观察代码发现,name的input 多了一个事件绑定单向绑定数据
age: {
{ age }}age:
双向绑定数据
name: {
{ name}}name:
@input="name=$event.target.value"
所以,实现数据双向绑定的原理就是: 1、数据name单向传递给input;2、input触发事件后将name的值进行了修改
自定义v-model双向绑定
child.vue
main.vue
子组件v-model示例
age: {
{ age}}age:
启动调试
$ vue serve main.vue这样就实现了自定义v-model语法 原理很简单
1、父组件给子组件传值2、子组件值修改,触发事件修改父组件值3、父组件再将新值传递给了子组件,子组件的接收到父组件变更的值
所以还是数据还是单向流动
参考:
转载地址:https://pengshiyu.blog.csdn.net/article/details/100578613 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
留言是一种美德,欢迎回访!
[***.207.175.100]2024年04月25日 10时16分31秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
百分制成绩
2019-05-08
判断一个数是不是水仙花数
2019-05-08
上楼梯问题
2019-05-08
兔子产子
2019-05-08
数列求和
2019-05-08
字符串大写转小写
2019-05-08
阿姆斯特朗数
2019-05-08
linux忘记root密码的解决方法
2019-05-08
修改Linux默认启动级别或模式
2019-05-08
Linux系统目录结构
2019-05-08
SQL Server实现列的自动增长
2019-05-08
android调用.net的webservice的例子获取手机的归属地
2019-05-08
android使用webview加载网页
2019-05-08
怎么让别人点击文字“加我为qq好友”就可以加你qq的网页链接
2019-05-08
css文件链接html的三种方式
2019-05-08
java进程和线程学习
2019-05-08
用C语言来验证哥德巴赫猜想(定义的是int型)
2019-05-08
android调用系统相机拍照并保存在本地
2019-05-08
结构体在内存中的对齐规则
2019-05-08