Vue组件内部实现一个双向数据绑定的实例代码


Posted in Javascript onApril 04, 2019

思路:父组件通过props传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,具体实现如下:

import Vue from 'vue'
const component = {
  props: ['value'],
   template: `
    <div>
      <input type="text" @input="handleInput" :value="value">
    </div>
  `,
   data () {
     return{}
   },
   methods: {
    handleInput (e) {
      this.$emit('input', e.target.value)
    }
  }
}
new Vue({
  components: {
    CompOne: component
   },
   el: '#root',
   template: `
    <div>
     <comp-one :value1="value" @input="value = arguments[0]"></comp-one>
    </div>
   `,
 data () {
  return{
    value: '123'
  }
 }
})

总结

以上所述是小编给大家介绍的Vue组件内部实现一个双向数据绑定的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
详解JavaScript的变量
Apr 04 #Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 #Javascript
js 计算图片内点个数的示例代码
Apr 04 #Javascript
在node中使用jwt签发与验证token的方法
Apr 03 #Javascript
全面了解JavaScript的作用域链
Apr 03 #Javascript
从理论角度讨论JavaScript闭包
Apr 03 #Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 #Javascript
You might like
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
Display SQL Server Version Information
2007/06/21 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
js实现图片轮播效果
2015/12/19 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
python实现保存网页到本地示例
2014/03/16 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
Java程序员常见面试题
2015/07/16 面试题
个人生活学习自我评价范文
2013/11/26 职场文书
人事主管岗位职责
2014/01/30 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
领导参观欢迎词
2015/01/26 职场文书
电气工程师岗位职责
2015/02/12 职场文书
三行辞职书范文
2015/02/26 职场文书
工作推荐信模板
2015/03/25 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫