• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

数组克隆和对象克隆

169 0

今天写vue组件的时候碰到一个问题,我创建了一个子组件,这个子组件会通过父组件传过来的数组对象进行遍历,然后生成多个筛选菜单,这不是一个菜单,而是有多个,比如地区菜单,分类菜单,标签菜单,反正很多。

每个菜单都要有对应的active状态,我才能知道他选中了没有,所以又传给子组件一个对象,对象里面包含了所有的菜单id的键值对,但是值是空的,等待子组件状态发生变化,再修改对象中的值。

本来我是想省点事,不用vuex,然后利用对象的特性,引用类型,子组件可以直接修改对象里的属性,我父组件也能监控得到,但是问了下群友,说这种方式到时候很乱,所以我又改用了官方建议的方式,用emit。

为此就用了sync修饰符,具体用法也可以在本博客百度到,我就不多说了。

但问题是sync的修改,是直接修改整个对象,而子组件是对象中某个属性变化修改,所以,为了不让引用类型造成错乱,我只能使用对象克隆了,克隆一个对象,再对这个对象修改,再emit传给父组件,父组件使用,这样就完全断掉了引用类型的影响。

对象克隆

let upObj = {};
//克隆对象
Object.assign(upObj, this.activeData);  //this.activeData就是我要克隆的对象变量名

//此时upObj就是一个克隆对象了,我们对他做的修改,不会影响到this.activeData

克隆数组

//克隆数组
let upArr = Array.from(this.filterData); //this.filterData为要克隆的数组变量名

//此时upArr为一个全新的数组,且拥有this.filterData的值

都是es6的语法,有需要可以自行百度转换成es5

0
  • 本文分类:JavaScript
  • 本文标签:克隆对象克隆数组
  • 流行热度:已超过 169 人围观了本文
  • 最后更新:2020年07月3日 - 12时02分45秒
  • 发布日期:2020年07月3日 - 12时02分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码