解决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 相关文章推荐
测试你的JS的掌握程度的代码
Dec 09 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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提示Failed to write session data错误的解决方法
2014/12/17 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Cython 三分钟入门教程
2009/09/17 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
如何基于Python实现数字类型转换
2020/02/07 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
python Timer 类使用介绍
2020/12/28 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
个人简历自我评价范文
2014/02/04 职场文书
廉洁使者实施方案
2014/03/29 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
毕业实习证明范本
2015/06/16 职场文书
素质拓展训练感想
2015/08/07 职场文书
早上好问候语大全
2015/11/10 职场文书