自定义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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
php定界符
2014/06/19 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
phpwind放自动注册方法
2006/12/02 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
python创建线程示例
2014/05/06 Python
Python正则简单实例分析
2017/03/21 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
抽象类和接口的区别
2012/09/19 面试题
医学院学生的自我评价分享
2013/11/19 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
2015入党自传书范文
2015/06/26 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL