自定义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 相关文章推荐
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
javascript 写的一个简单的timer
Jul 30 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
React路由管理之React Router总结
May 10 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
js基础之事件捕获与冒泡原理
Oct 09 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
收音机指标测试方法及仪器
2021/03/01 无线电
php 验证码实例代码
2010/06/01 PHP
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php URL验证正则表达式
2011/07/19 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Python内置函数reversed()用法分析
2018/03/20 Python
使用Python设计一个代码统计工具
2018/04/04 Python
python:动态路由的Flask程序代码
2019/11/22 Python
python让函数不返回结果的方法
2020/06/22 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
golang/python实现归并排序实例代码
2020/08/30 Python
HTML5进度条特效
2014/12/18 HTML / CSS
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
电气专业推荐信范文
2013/11/18 职场文书
如何填写个人简历自我评价
2013/12/10 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
导游词之昭君岛
2020/01/17 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
使用pandas模块实现数据的标准化操作
2021/05/14 Python