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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
在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 IPV6正则表达式验证代码
2010/02/16 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
centos系统升级python 2.7.3
2014/07/03 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
Python模块常用四种安装方式
2020/10/20 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
给导游的表扬信
2014/01/10 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
小学教师培训方案
2014/06/09 职场文书
监察建议书
2015/02/04 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
新闻稿怎么写
2015/07/18 职场文书
2016猴年春节问候语
2015/11/11 职场文书
Python集合set()使用的方法详解
2022/03/18 Python
JAVA springCloud项目搭建流程
2022/05/11 Java/Android