Vue 组件通信这块，其实在先前的文章《vue 组件传值》中就已经提过，总结了常用的五种方法：props、ref、emit、路由、vuex。
这里，考虑到实际项目中的开发需要，略加补充，一起探讨学习下！
provide + inject (官档)
provide / inject 是Vue.js 2.2.0 新增的 API，一种无依赖的组件通信方法。
官档说明：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。
A.vue
<template>
<div class="grand">
<Father></Father>
</div>
</template>
<script>
export default {
provide: {
name:"Hello"
}
}
</script>
B.vue
<template>
<div class="father">
<div>name:{{name}}</div>
<Sub></Sub>
</div>
</template>
<script>
export default {
inject: ['name'],
}
</script>
C.vue
<template>
<div class="sub">
<div>sub:{{name}}</div>
</div>
</template>
<script>
export default {
inject: ['name'],
}
</script>
*提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
## $attrs 和 $listeners([官档](https://cn.vuejs.org/v2/api/#vm-attrs))
$attrs 和 $listeners 都是Vue.js 2.4.0 版本新增的，实现父、子、孙组件的通信。
A.vue
<template>
<div class="grand">
<Father :num="active"></Father>
</div>
</template>
<script>
export default {
data() {
return {
active:0
};
},
}
</script>
B.vue
<template>
<div class="father">
<div>son:{{$attrs.num}}</div>
<Sub v-bind="$attrs" v-on="$listeners"></Sub>
</div>
</template>
C.vue
<template>
<div class="sub">
<p>sub: {{$attrs.num}}</p>
</div>
</template>
*提示：$attrs 和 $listeners 的数据会动态响应的
插槽 slot
<template>
<div class="index">
<Tab :tabData="tabData" @tabHandle="tabHandle">
<template slot="tabContent" slot-scope="props">
<div>{{props.active}}</div>
</template>
</Tab>
</div>
</template>
<template>
<div class="tab">
<div class="hd">
<div v-for="(item,index) in tabData" :key="index" @click="tabCard(index)">{{item}}</div>
</div>
<div class="bd">
<slot name="tabContent" :active="active"></slot>
</div>
</div>
</template>
cookie、localStrage、sessionStorage
Vuex 刷新页面 state 数据丢失问题
比如，当你成功登陆一个后台系统后，接口会返回一个 Token 用来作身份验证。
前端储存这个token，如果用 vuex 设置 state，刷新页面，数据会丢失，这里就会用到这三者： cookie、localStrage、sessionStorage
先来对比看下这三者：
图片引用自网络，侵删！
所以，这里用到的是 localStrage
login(shareKey) {
let { username, password } = this.loginData;
let params = { username, password };
params.shareKey = shareKey;
this.$fetch.login.toLogin(params).then((res) => {
localStorage.setItem('user_info', JSON.stringify(res.data));
this.$router.push('/cusService');
}).catch((err) => {
})
},
增删改查：
//cookie
function setCookie(key,value,t){ //设置
var oDate = new Date();
oDate.setDate(oDate.getDate()+t);//某天
document.cookie = key + '='+value+';expries ='+oDate.toUTCString();
}
setCookie("name","hayden",365);
function getItem(key){ //获取
let cookiesArr = document.cookie.split("; "); //留意 ;带空格
for(let i of cookiesArr){
let item = i.split("=");
if(item[0]==key){
return item[1]
}
}
}
getItem("name")
function removeCookie(key){ //删除key
setCookie(key,'',-1);
}
removeCookie("name")
//localStorage
localStorage["a"]=1; //设置
localStorage.a=1; l
localStorage.setItem("a",1);
localStorage['a']; //获取
localStorage.a;
localStorage.getItem("a")
localStorage.removeItem("key") //删除key
localStorage.clear() //清空所有
//sessionStorage
sessionStorage.setItem('a','1'); //设置
sessionStorage.a = '1';
sessionStorage['a'] = '1';
sessionStorage.getItem('a'); //获取
sessionStorage.a
sessionStorage['a'];
sessionStorage.removeItem("a"); //删除key
sessionStorage.clear(); //清空所有