vue组件库开发日志（4）|青训营笔记

这是我参加青训营笔记活动第11天

$emit

子组件同父组件的交流， 可以自定义事件，然后父组件通过$on接受子组件传来的自定义事件.

$on

这是vue2.x的语句

[vm.$on( event, callback )]

vue2.x监听 $emit

• 参数：

  • {string | Array<string>} event (数组只在 2.2.0+ 中支持)
  • {Function} callback

• 用法：

  监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

• 示例：

  vm.$on('test', function (msg) {
    console.log(msg)
  })
  vm.$emit('test', 'hi')
  // => "hi"
  

引用拷贝 浅拷贝 深拷贝

• 引用拷贝：单纯的拷贝引用，两个变量指向同一个引用地址，同时操作一个空间
• 浅拷贝：新创建一个对象，让两个对象指向不同的空间，但是缺点就是 如果对象里面还包含有引用的话那么不同的引用都指向同一个空间。
• 深拷贝：为了解决对象内有引用的问题。深拷贝的过程中会连同对象一同拷贝

JSON.parse(JSON.stringify(obj))我们一般用来深拷贝，其过程说白了 就是利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象；序列化的作用是存储(对象本身存储的只是一个地址映射，如果断电，对象将不复存在，因此需将对象的内容转换成字符串的形式再保存在磁盘上 )和传输（例如 如果请求的Content-Type是 application/x-www-form-urlencoded，则前端这边需要使用qs.stringify(data)来序列化参数再传给后端，否则后端接受不到； ps: Content-Type 为 application/json;charset=UTF-8或者 multipart/form-data 则可以不需要 ）；我们在使用 JSON.parse(JSON.stringify(xxx))

let a = {
    name:'a',
    number:100,
}

let copy = JSON.parse(JSON.stringify(a));

但要注意以下几点

自我提问
深拷贝是为了解决浅拷贝的什么问题？

参考文档
(v2.cn.vuejs.org/v2/api/#vm-…)
(JSON.parse(JSON.stringify()) 实现对对象的深拷贝 - ice_sweet - 博客园 (cnblogs.com))