浅析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 相关文章推荐
jQuery的一些特性和用法整理小结
Jan 13 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
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+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
yii2安装详细流程
2018/05/23 PHP
新闻内页-JS分页
2006/06/07 Javascript
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
python3.0 字典key排序
2008/12/24 Python
9种python web 程序的部署方式小结
2014/06/30 Python
用实例分析Python中method的参数传递过程
2015/04/02 Python
python中尾递归用法实例详解
2015/04/28 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
Python continue继续循环用法总结
2018/06/10 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
python定时任务 sched模块用法实例
2019/11/04 Python
python常用数据重复项处理方法
2019/11/22 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
PHP经典面试题
2016/09/03 面试题
会计实习期自我鉴定
2013/10/06 职场文书
高三自我鉴定范文
2013/10/19 职场文书
学生请假条
2014/04/11 职场文书
博士生求职信
2014/07/06 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
政风行风整改报告
2014/11/06 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python