浅析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 获取页面的高度及滚动条的位置的代码
May 06 Javascript
Javascript 数组排序详解
Oct 22 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 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实现批量生成App各种尺寸Logo
2015/03/19 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
Django中间件实现拦截器的方法
2018/06/01 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
python 画图 图例自由定义方式
2020/04/17 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
SQL Server面试题
2016/10/17 面试题
千元咖啡店的创业计划书范文
2013/12/29 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
计算机学生求职信范文
2014/01/30 职场文书
班级文化标语
2014/06/23 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers