vue技术栈进阶（04.状态管理，Bus，state，getters） (2020-04-16 21:19)

1.子组件和父组件之间的传值

子组件传给父组件： 用事件的方式

在这里插入图片描述
在这里插入图片描述

同文件子组件之间的传值

利用父组件作为中介，来单向流的进行传递
在这里插入图片描述

不同文件子组件之间的传值（例如跟组件中不同的组件，不方便在跟组件中书写逻辑代码）【Bus】

可以利用 Bus来进行传值 （Bus就是一个新的Vue实例对象，挂载到全局Vue原原型对象上，这样就可以在根组件监听这个Bus数据状态的变化进行值的发送与接受）
在这里插入图片描述

2.Vuex状态管理

Vuex工作的流程

在这里插入图片描述

Vuex结构

在这里插入图片描述
在这里插入图片描述

------State属性相当于（data属性）

在state.js中定义，在index.js中引入

组件中获得定义在state 中值 的第一种方式

在这里插入图片描述

组件中过去定义在state 中值 的第二方式（通过mapState）

在这里插入图片描述

可以为模块开启命名空间（方便访问）

在这里插入图片描述
1.
在这里插入图片描述
2.
在这里插入图片描述

------getters属性相当于（computed属性）

getters模块的定义格式如下
在这里插入图片描述

组件中获得定义在getters 中值 的第一种方式

·

组件中获得定义在getter 中值 的第二种方式（利用mapGetters）

在这里插入图片描述
2.
在这里插入图片描述
3.
在这里插入图片描述

posted @ 2020-04-17 18:01  jacksonni  阅读(190)  评论(0)  编辑  收藏  举报