解决Vue2.x父组件与子组件之间的双向绑定问题


Posted in Javascript onMarch 06, 2018

最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex,但观摩了一下其他优秀的UI框架,发现使用Vuex会给其他使用者造成麻烦,于是决心找到寻求解决方法,在参考了几篇大牛们文章后,终于找到。

在这将解决方案贴出,希望能帮助到和我一样初次接触Vue这个框架的同行们。

子组件的代码逻辑

<template> 
 <div class="ne-ipt"> 
  <input type="text" v-model="currentValue"> 
 </div> 
</template> 
 
<style lang="less" scoped> 
 @import "../../assets/styles/form/form.less"; 
</style> 
<script> 
 export default { 
  name: 'NeIpt', 
  props: { 
   // 接收一个由父级组件传递过来的值 
   value: { 
    type: String, 
    default: function () { 
     return '' 
    } 
   } 
  }, 
  computed:{ 
   currentValue: { 
    // 动态计算currentValue的值 
    get:function() { 
     return this.value; // 将props中的value赋值给currentValue 
    }, 
    set:function(val) { 
     this.$emit('input', val); // 通过$emit触发父组件 
    } 
   } 
  } 
 } 
</script>

父组件代码逻辑

<template> 
 <div id="button-index"> 
  <ne-ipt placeholder="姓名" v-model="test"></ne-ipt> 
 </div> 
</template> 
<style> 
</style> 
<script> 
 import NeIpt from './NeIpt' 
 export default { 
  name: 'form-index', 
  data () { 
   return { 
    test: '' 
   } 
  }, 
  components: { 
   NeIpt 
  } 
 } 
</script>

在修改子组件的currentValue的时候其实通过$emit触发input事件将值传递给调用者的v-model,从而实现双向绑定。

总结

以上所述是小编给大家介绍的解决Vue2.x父组件与子组件之间的双向绑定问题法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
基于JavaScript实现轮播图效果
Jan 02 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 #Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 #Javascript
node的process以及child_process模块学习笔记
Mar 06 #Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 #Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 #jQuery
Vue2.0 http请求以及loading展示实例
Mar 06 #Javascript
浅析Vue中method与computed的区别
Mar 06 #Javascript
You might like
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
网页打开自动最大化的js代码
2012/08/22 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
python增加图像对比度的方法
2019/07/12 Python
python之生产者消费者模型实现详解
2019/07/27 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
python代码如何注释
2020/06/01 Python
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
抽象类和接口的区别
2012/09/19 面试题
历史专业大学生职业生涯规划书
2014/03/13 职场文书
竞选部长演讲稿
2014/04/26 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
汽车转让协议书
2015/01/29 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书