参考:https://juejin.im/post/5d267dcdf265da1b957081a3#heading-1(写的很详细)
https://blog.csdn.net/songxiugongwang/article/details/84001967
《vue.js实战》
本人实际操作:
https://github.com/zhaozhenghao/vue.git
我这边笼统说一下
1.props/$emit 概念:父组件通过props
的方式向子组件传递数据,而通过$emit
子组件可以向父组件通信。
2.$children/$parent
概念: 通过$parent
和$children
就可以访问组件的实例。
使用 this.$parent查找当前组件的父组件。使用 this.$children查找当前组件的直接子组件,可以遍历全部子组件, 需要注意 $children 并不保证顺序,也不是响应式的。 3.provide/ inject 概念:
provide
/ inject
是vue2.2.0
新增的api, 简单来说就是父组件中通过provide
来提供变量, 然后再子组件中通过inject
来注入变量。
4.ref/ refs
概念:ref
:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,可以通过实例直接调用组件的方法或访问数据
5.eventBus
概念:eventBus
又称为事件总线,在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件。
6.Vuex
概念:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 解决了多个视图依赖于同一状态
和来自不同视图的行为需要变更同一状态
的问题,将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上。
7.localStorage / sessionStorage
8.attrs/$listeners
概念:是vue2.4.0引入的该方法,为了解决跨级的组件
- 使用props绑定来进行一级一级的信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一级级往上传递
- 使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低, 可读性也低
- 使用Vuex来进行数据管理, 但是如果仅仅是传递数据, 而不做中间处理,使用Vuex处理感觉有点大材小用了.
常见使用场景可以分为三类:
- 父子组件通信:
props
;$parent
/$children
;provide
/inject
;ref
;$attrs
/$listeners
- 兄弟组件通信:
eventBus
; vuex - 跨级通信:
eventBus
;Vuex;provide
/inject
、$attrs
/$listeners