Vue:自定义v-model数据双向绑定-白红宇的个人博客

Vue:自定义v-model数据双向绑定

发布日期：2021-07-01 06:06:40 浏览次数：2 分类：技术文章

本文共 610 字，大约阅读时间需要 2 分钟。

示例

age 数据单向绑定

name 数据双向绑定

在这里插入图片描述

观察代码发现，name的input 多了一个事件绑定@input="name=$event.target.value"

所以，实现数据双向绑定的原理就是：

1、数据name单向传递给input；2、input触发事件后将name的值进行了修改

child.vue

main.vue

启动调试

$ vue serve main.vue

在这里插入图片描述

这样就实现了自定义v-model语法

原理很简单

1、父组件给子组件传值2、子组件值修改，触发事件修改父组件值3、父组件再将新值传递给了子组件，子组件的接收到父组件变更的值

所以还是数据还是单向流动

参考：

转载地址：https://pengshiyu.blog.csdn.net/article/details/100578613 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：Flask热更新html模板文件和静态文件

下一篇：vColorPicker基于 Vue 的颜色选择器插件

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！