自定义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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
基于openlayers实现角度测量功能
Sep 28 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python实现linux下抓包并存库功能
2018/07/18 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
EJB面试题
2015/07/28 面试题
什么是封装
2013/03/26 面试题
文秘专业应届生求职信范文
2013/11/14 职场文书
三年级评语大全
2014/04/23 职场文书
医院保洁服务方案
2014/06/11 职场文书
针对吵架老公保证书
2015/05/08 职场文书