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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
JQuery Tips相关(1)----关于$.Ready()
Aug 14 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
vuex actions传递多参数的处理方法
Sep 18 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
GD输出汉字的函数的分析
2006/10/09 PHP
第三节--定义一个类
2006/11/16 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
对python 自定义协议的方法详解
2019/02/13 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
大学生个人总结的自我评价
2013/10/05 职场文书
实习鉴定评语
2014/01/19 职场文书
自荐书4要点
2014/01/25 职场文书
社区端午节活动方案
2014/01/28 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
爱国主题班会教案
2015/08/14 职场文书
多人股份制合作协议书
2016/03/19 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android