浅析vue中的provide / inject 有什么用处


Posted in Javascript onNovember 10, 2019

1.前言

vue的父子组件通信用什么?

:prop和$emit的组合。

如果是爷孙组件呢?

:那么就要用父组件来转发数据和事件了。

如果是太爷爷和孙子组件呢?

:当然是vuex啦

emmm 好的,没我啥事了,我这就走。

不行,我还能再挣扎一会儿!肯定有一部分兄弟做的项目比较小,组件通信的情况不是很多,懒得引入vuex,那么provide/inject就是爷孙(不限于爷孙/父子,中间隔了多少级都可以)通信问题的最好解决方案啦!

2.官方文档抄过来的介绍

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

provide 选项应该是

  • 一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject 选项应该是:

  • 一个字符串数组,或
  • 一个对象(详情点击 这里 )

3.基本用法

// 祖先组件 提供foo
//第一种
export default {
 name: "grandfather",
 provide(){
  return{
   foo:'halo'
  }
 },
}
//第二种
export default {
 name: "grandfather",
 provide:{
  foo:'halo~~~~'
 },
}
//后代组件 注入foo
export default {
 inject:['foo'],
}

上面的两种用法有什么区别吗?

  • 如果你只是传一个字符串,像上面的‘halo',那么是没有区别的,后代都能读到。
  • 如果你需要传一个对象(如下所示代码),那么第二种是传不了的,后代组件拿不到数据。所以建议只写第一种
//当你传递对象给后代时
provide(){
  return{
   test:this.msg
  }
 },

注意: 一旦注入了某个数据,比如上面示例中的 foo,那这个组件中就不能再声明 foo 这个数据了,因为它已经被父级占有。

4.什么时候才是可响应的?

如果你使用过vuex,那么你会认为,上面的例子中,如果我把 foo:'halo' 改成 foo:'world' ,子组件会及时响应数据变更,视图完成更新。

可惜,没有

在vue官方文档中有这么一句话

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

这里不探讨vue为什么要这么设计,我这里只展示啥时候provide/inject可响应

provide(){
 return{
  test:this.msg
 }
},
data() {
 return {
  msg: "Welcome to Your Vue.js App",
 }
}
mounted(){
 setTimeout(()=>{
  this.msg = "halo world";
  console.log(this._provided.msg)
  //log:Welcome to Your Vue.js App
 },3000)
},

如上所示,这样做是不行的,打印出来的 provided 中的数据并没有改,子组件取得值也没变。

你甚至可以直接给 this._provided.msg 赋值,但是 即使 是 _provided.msg 里面的值改变了,子组件的取值,依然没有变。

当你像下面这样做的时候,就可以响应了

provide(){
 return{
  test:this.activeData
 }
},
data() {
 return {
  activeData:{name:'halo'},
 }
}
mounted(){
 setTimeout(()=>{
  this.activeData.name = 'world';
 },3000)
}

这就是vue中写道的 对象的属性 是可以响应的

然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

5.实现全局变量

全局变量?provide/inject不是只能从祖先传递给后代吗?没错,我们只要绑定到最最顶层的组件即可。

就是你啦! app.vue

我们把一整个实例都扔给后代!

//app.vue
export default {
 name: 'App',
 provide(){
  return{
   app:this
  }
 },
 data(){
  return{
   text:"it's hard to tell the night time from the day"
  }
 },
 methods:{
  say(){
   console.log("Desperado, why don't you come to your senses?")
  }
 }
}
//其他所有子组件,需要全局变量的,只需要按需注入app即可
export default {
 inject:['foo','app'],
 mounted(){
  console.log(this.app.text);//获取app中的变量
  this.app.say();//可以执行app中的方法,变身为全局方法!
 }
}

这个也是可响应的噢~

6.实现页面刷新

1 . 用vue-router重新路由到当前页面,页面是不进行刷新的

2 . 采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好

那我们怎么做呢?

跟上面的原理差不多,我们只在控制路由的组件中写一个函数(使用 v-if 控制 router-view 的显示隐藏,这里的原理不作赘述),然后把这个函数传递给后代,然后在后代组件中调用这个方法即可刷新路由啦。

//app.vue
<router-view v-if="isShowRouter"/>
export default {
 name: 'App',
 provide(){
  return{
   reload:this.reload
  }
 },
 data(){
  return{
   isShowRouter:true,
  }
 },
 methods:{
  reload(){
   this.isShowRouter = false;
   this.$nextTick(()=>{
    this.isShowRouter = true;
   })
  }
 }
}
//后代组件
export default {
 inject:['reload'], 
}

7.结尾

vue中有这样的提示

注意: provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

provide/inject平时用的比较少,多数用于开发组件,但某些情况下还是很好用的。

业务庞大而复杂的,还是建议使用 vuex ~

总结

以上所述是小编给大家介绍的vue中的provide / inject 有什么用处,希望对大家有所帮助!

Javascript 相关文章推荐
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
Jan 05 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 #Javascript
webpack4 optimization使用总结
Nov 10 #Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 #Javascript
node后端服务保活的实现
Nov 10 #Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 #Javascript
vue父子组件的通信方法(实例详解)
Nov 10 #Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 #Javascript
You might like
PHP中strtotime函数使用方法分享
2012/01/10 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
angular4自定义组件详解
2017/09/28 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
python机器学习之贝叶斯分类
2018/03/26 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
python实现与redis交互操作详解
2020/04/21 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
销售代表求职自荐信
2013/10/01 职场文书
水污染治理专业毕业生推荐信
2013/11/14 职场文书
创业计划书模版
2014/02/05 职场文书
材料加工工程求职信
2014/02/19 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
5行Python代码实现一键批量扣图
2021/06/29 Python