Vue通信、传值的多种方式

一、通过路由带参数进行传值

1、两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B

2、在B组件中获取A组件传递过来的参数

this.$route.query.orderId

二、通过设置 Session Storage缓存的形式进行传递

1、两个组件A和B，在A组件中设置缓存orderData

const orderData = { 'orderId': 123, 'price': 88 }
 
sessionStorage.setItem('缓存名称', JSON.stringify(orderData))

2、B组件就可以获取在A中设置的缓存了

const dataB = JSON.parse(sessionStorage.getItem('缓存名称'))

此时 dataB 就是数据 orderData

三、父子组件之间的传值

（一）父组件往子组件传值props

1、定义父组件，父组件传递 number这个数值给子组件，如果传递的参数很多，推荐使用json数组{}的形式。

2、定义子组件，子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型，如果不符合会报错。

3、假如接收的参数 是动态的，比如 input输入的内容 v-model的形式。

4、父子组件传值，数据是异步请求，有可能数据渲染时报错

（二）子组件往父组件传值，通过emit事件

四、不同组件之间传值，通过eventBus

小项目少页面用eventBus，大项目多页面使用 vuex

1、定义一个新的vue实例专门用于传递数据，并导出

2、定义传递的方法名和传输内容，点击事件或钩子函数触发eventBus.emit事件

3、接收传递过来的数据

五、vuex进行传值

1、 vuex主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父子组件），或者大型spa单页面框架项目，页面多并且一层嵌套一层的传值，异常麻烦，用vuex来维护共有的状态或数据会显得得心应手

  1. src新建一个vuex文件夹

  1. vuex文件夹里新建一个store.js

  1. 安装vuex cnpm install vuex --save

  1. 在刚才创建的store.js 中引入vue、vuex 引入vue

2、VueX的核心概念

state

vuex中的数据源，我们需要保存的数据就保存在这

获取state中数据的方法：

（一）this.$store.state

（二）在组件中引入mapState

Mutation

可以更改state中的数据，好处：有益于监控所有数据的变化；坏处：不能执行异步操作

组件访问方式1： this.$store.commit('add',传递的参数首先需要定义一个参数)

组件访问方式2：import {mapMutation} from ...

在methods里面使用 ...mapMutation(['add','abc','在mutations里面定义的函数名'])

在methods直接调用this.add

Action

专门处理异步任务（不能直接修改state中的数据，只能通过context.commit('add')去出发mutation里面的方法）

组件访问方式1：$this.store.dispatch('addasync','传递的参数')

组件访问方式2：import {mapAction} from ...

在methods里面使用 ...mapAction(['addasync','在action里面定义的函数名'])

在methods直接调用this.addasync

Getter

用于对store中的数据进行加工处理形成新的数据

使用方法同上，只不过名字需要改一下

modules

modules，就是模块化的意思，因为是单一状态树，怕我们在state里面写的东西太多了，不好进行查找，那我们可以在我们的modules里面重新定义我们的一个模块，就是相当于一个store，里面也有我们所需要的五个属性，所进行的操作也是一样的