自定义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 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
详解vue express启动数据服务
Jul 05 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 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程序?
2006/12/08 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
详解Django通用视图中的函数包装
2015/07/21 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
用Python逐行分析文件方法
2019/01/28 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python实现FM算法解析
2019/06/18 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
ajax是什么及其工作原理
2012/02/08 面试题
乡镇干部十八大感言
2014/02/17 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
简历自我评价优缺点
2015/03/11 职场文书
让世界充满爱观后感
2015/06/10 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
安全生产协议书
2016/03/22 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL