VUE随笔-组件间传值方式

95 阅读1分钟

1、VUE组件间的传值方式

porps emits

解决问题: 常用父子组件传值方式,但也仅限于父子组件
存在问题:多级传递会存在强依赖,不方便维护

parent children

解决问题: 父子组件通讯方式,可以直接获取到父子组件对象VueComponent
存在问题:
1、父亲只有一个,但是儿子可能有多个
2、由于父子组件的生命周期不同步,子组件会优于父组件完成DOM更新,所以在父组件获取子组件DOM更新后的值需要用到$nextTick

attrs listeners

解决问题:
多级组件传递方法或属性,而中间级组件不用或少用其中属性值问题;
存在问题:
attrsattrs和listeners里面的东西总会让使用者感到茫然,需要去最上级或者最下级查找;

provide/inject

解决问题:
多级组件传递值,需要在每个组件定义 props 或 $attrs问题 存在问题:
项目复杂情况下,由多个人完成,容易key重复 解决方案:
考虑symbol包裹key值

eventBus

解决不存在关系组件间的传值问题 存在问题:
过度依赖eventBus也会让接收代码的人感到困惑,且需要保证on完必须有off,对于点击类的事件发送,很容易因为没处理好off导致页面变卡甚至宕机

vuex

解决问题:
多个组件共用同一个数据
存在问题:
1、页面刷新后数据会丢失,需要借助sessionStorage和localStorage来存储数据; 2、应用VUE让程序耦合度提高,在其他项目想要搬运这个项目的组件时,往往需要因此做更多工作。因此,使用时需要考虑解耦