vue组件传递对象中实现单向绑定的示例


Posted in Javascript onFebruary 28, 2018

当使用vue组件时,组件之间经常需要传递数据,这里不讨论传递一个字符串变量或者数字变量的情况,那些去看官方文档就够了,此处提出我在组件间传递对象时遇到的一个坑。

当组件间传递对象时,由于此对象的引用类型指向的都是一个地址,所以在子组件中修改对象的某个属性值,父组件中的对象对应的属性也会随之改变,如果有这种双向绑定的需要,那么这也算一种不错的办法,但如果不需要这种双向绑定,那就要定义一个新的对象来复制原对象的属性和值,坑就在这里,假如你普通的var、let 一个对象,例如:

computed: { 
  data: function () { 
   let obj={}; 
   obj=this.message//this.message是父组件传递的对象 
   return obj 
 } 
 },

将data中各属性分别绑定到输入框中,并修改试试,你会发现父组件中对应的属性值还是会改变,并没有实现单向绑定的效果,这时就需要加一个方法了

computed: { 
 data: function () { 
  let obj=Object.assign({}, this.message); 
  return obj 
 } 
 },

这样返回的data就是一个新的对象,并不会指向原对象的地址,所以再对其进行修改就不会对父组件中的对象造成影响了。

以上这篇vue组件传递对象中实现单向绑定的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
vue 中filter的多种用法
Apr 26 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
vue总线机制(bus)知识点详解
May 10 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 #Javascript
React组件中的this的具体使用
Feb 28 #Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 #Javascript
Node.js中DNS模块学习总结
Feb 28 #Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 #Javascript
如何在vue中使用ts的示例代码
Feb 28 #Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 #Javascript
You might like
php笔记之:文章中图片处理的使用
2013/04/26 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
Python转码问题的解决方法
2008/10/07 Python
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
python实发邮件实例详解
2019/11/11 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
在校生钳工实习自我鉴定
2013/09/19 职场文书
主治医师岗位职责
2013/12/10 职场文书
小学中秋节活动方案
2014/02/06 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS