解决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 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
React配置子路由的实现
Jun 03 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
详解PHP队列的实现
2019/03/14 PHP
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
python实现各进制转换的总结大全
2017/06/18 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
预备党员承诺书
2014/03/25 职场文书
财务工作失误检讨书
2015/02/19 职场文书
详解Vue的options
2021/05/15 Vue.js
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android