自定义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 EXCEL 操作类代码
Jul 30 Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
vue动态渲染svg、添加点击事件的实现
Mar 13 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
无限级别菜单的实现
2006/10/09 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
快速查询Python文档方法分享
2017/12/27 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
python高级特性简介
2020/08/13 Python
python中操作文件的模块的方法总结
2021/02/04 Python
董事长助理岗位职责
2014/02/18 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书