组件传参和vuex

Vue组件传参

vue组件传参一共三个类型，父向子传参，子向传参

，兄弟之间传参

1. 父向子传参： 父组件向子组件共享数据需要使用自定义属性----props
   比如我们有父组件 Father 和 子组件 Son。如果需要父向子传参时，则需要在子组件Son中添加一个props（与data平级）。在props中可以添加自定义属性，属性名自己取。比如fromfather：{default:0, type:Number} 传参时只需要在父组件中使用子组件 这里使用的属性名必须与子组件中props上定义的一样
2. 子向父传参
   子组件向父组件共享数据使用自定义事件
   在子组件Son的methods中定义一个方法，其中有this.$emit(‘自己定义的方法名’, 要传的数据)
3. 兄弟组件之间传参
   兄弟组件之间数据共享的方案是 eventBus
   创建个eventBus.js模块 向外共享一个Vue实例对象
   在数据发送方导入eventBus.js 调用bus.e m i t ( ′ 事 件 名 ′ , ′ 要 发 送 的 数 据 ′ ) 方 法 触 发 自 定 义 事 件 在 数 据 接 收 方 导 入 e v e n t B u s . j s ， 调 用 b u s . emit(‘事件名’, ‘要发送的数据’)方法触发自定义事件 在数据接收方 导入eventBus.js ，调用bus.emit( ′事件名 ′, ′要发送的数据 ′)方法触发自定义事件在数据接收方导入eventBus.js，调用bus.on(‘事件名’, ‘事件处理函数’)方法注册一个自定义事件

vuex

什么是vuex？为什么用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

什么时候使用它？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

安装

方法一
在脚手架 创建项目时勾选vuex的选项系统会自动创建

方法二 npm 或Yarn安装

npm install vuex@next --save

yarn add vuex@next --save

配置

如果采用脚手架方式进行创建，无需任何操作，可以忽略此步骤
新建store文件->index.js，进行如下配置，在mian.js中进行引入

import Vue from