自定义Vue中的v-module双向绑定的实现


Posted in Javascript onApril 17, 2019

v-module 双向绑定实际上就是通过子组件中的 $emit 方法派发 input 事件,父组件监听 input 事件中传递的 value 值,并存储在父组件 data 中;然后父组件再通过 prop 的形式传递给子组件 value 值,再子组件中绑定 input 的 value 属性即可。

我们着手实现一遍:

子组件传值

首先子组件需要一个 input 标签,这个 input 标签需要绑定 input 事件,$emit 触发父组件的 input 事件,通过这种方法子组件传递值给父组件

<input type="text" @input="$emit('input', $event.target.value)">

父组件监听 input 事件,然后将事件携带的 input 输入的值传入到 data 状态中

<my-comp @input="value = $event"></my-comp>
export default {
 // ...
 data () {
  return {
   value: 'initial value' // 维护一个 value 状态
  }
 }
}

至此子组件监听 input 事件,用户输入字符串即可被父组件获取到并保存在 data 状态中

父组件传值

然后父组件还需要将 value 值传递给子组件,子组件再绑定 value 值到 input 的 value 属性上

<my-comp :value="value" @input="value = $event"></my-comp>

增加 :value="value" 通过 prop 传递 value

子组件中绑定 input 的 value 属性

<input type="text" @input="$emit('input', $event.target.value)" :value="value">

注意 props 中需要设定 value

export default {
 name: 'MyComp',
 props: ['value']
}

至此自定义的 v-module 处理完毕,看看效果:

自定义Vue中的v-module双向绑定的实现

其他元素使用 v-model

在 input 上使用 v-model 比较简单,但考虑到其他元素不一定是要监听 input 事件而是 change 事件,也不一定是 value 属性改变元素的内容。比如 checkbox,我们就需要监听 change 事件,以及 checked 属性。

那么先手动实现一遍:

<input type="checkbox" @change="$emit('change', $event.target.checked)" :checked="checked">

子组件首先监听 change 事件,并 $emit 方法触发父组件的 change 事件,将 checked 属性值传入给父组件;同时接收父组件传递进来的 checked 值,根据 checked 值决定 input 元素的 checked 属性。

export default {
 name: 'MyComp',
 props: ['checked']
}

然后需要修改父组件:

<my-comp @change="checked = $event"></my-comp>
export default {
  // ...
 data () {
  return {
   checked: false
  }
 }
}

父组件监听 change 事件,并在 data 中维护状态 checked,默认值为 false

最后看看效果:

自定义Vue中的v-module双向绑定的实现

直接使用 v-model 指令

此外还可直接使用 v-model 指令:

<my-comp v-model="checked"></my-comp>

但需要在组件中修改 v-model 指令,指定 prop 和 event:

export default {
 name: 'MyComp',
 props: ['checked'],
 model: {
  prop: 'checked',
  event: 'change'
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
vue实现放大镜效果
Sep 17 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 #Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 #Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 #Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 #Javascript
vue 项目 iOS WKWebView 加载
Apr 17 #Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 #Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 #Javascript
You might like
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
PHP生成随机密码类分享
2014/06/25 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
php中错误处理操作实例分析
2019/08/23 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
如何在PHP中使用数组
2020/06/09 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
分享ES6的7个实用技巧
2018/01/18 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
python插入排序算法实例分析
2015/07/03 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
后勤人员自我评价怎么写
2013/09/19 职场文书
离婚起诉书范本
2015/05/18 职场文书
领导新年致辞2016
2015/07/29 职场文书
小学语文教师研修日志
2015/11/13 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
Python基础之变量的相关知识总结
2021/06/23 Python
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技