Vue 组件通信

原创 uptown 随笔 vue 56阅读 前天 01:35:23 举报

Vue 组件通信这块,其实在先前的文章《vue 组件传值》中就已经提过,总结了常用的五种方法:props、ref、emit、路由、vuex。
这里,考虑到实际项目中的开发需要,略加补充,一起探讨学习下!

provide + inject (官档

provide / inject 是Vue.js 2.2.0 新增的 API,一种无依赖的组件通信方法。

官档说明:这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

A.vue

B.vue

C.vue

*提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

$attrs 和 $listeners(官档)

$attrs 和 $listeners 都是Vue.js 2.4.0 版本新增的,实现父、子、孙组件的通信。

A.vue

B.vue

C.vue

*提示:$attrs 和 $listeners 的数据会动态响应的

插槽 slot

cookie、localStrage、sessionStorage

Vuex 刷新页面 state 数据丢失问题
比如,当你成功登陆一个后台系统后,接口会返回一个 Token 用来作身份验证。

前端储存这个token,如果用 vuex 设置 state,刷新页面,数据会丢失,这里就会用到这三者: cookie、localStrage、sessionStorage

先来对比看下这三者:

图片引用自网络,侵删!

所以,这里用到的是 localStrage

增删改查:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复