Vue2.0组件之间通信

一、前言

vue组件之间通信有三种情况：1.兄弟组件之间通信；2.父子组件之间通信；3.不同组件之间通信；

二、通信方式

2.1 兄弟组件之间

eventBus事件总线。

2.2 父子组件之间

2.2.1 父组件往子组件传值

通过 props.

2.2.2 子组件往父组件传值

通过emit事件.

2.3 不同组件之间

2.3.1 通过路由带参数

this.$router.push({ path: '/componentB',  query: { data: 12 } }) // A跳转到B
this.$route.query.data// B组件接收参数

2.3.2 通过sessionStorage缓存传递参数

const transData = { 'id': 12,  'value': 26 };
sessionStorage.setItem('data_name',  JSON.stringify(transData));
const receData = JSON.parse(sessionStorage.getItem('data_name'));

注：sessionStorage生命周期是浏览器关闭前。

2.3.3 eventBus事件总线

2.3.4 vuex

常用vuex来维护各个组件共有的状态或数据，大型项目中用的多。