vue的provide / inject 有什么用?

2019-11-10 admin

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~

如果文章有错误或者建议,请在评论区指出,非常感谢~

[转载]原文链接:https://segmentfault.com/a/1190000020954324

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78885.html

文章标题:vue的provide / inject 有什么用?

相关文章
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
为什么要选择Nodejs?Nodejs有什么好处?
什么?JavaScript还能用作服务器编程! Caleb Madrigal是来自美国密尔沃基市的一名软件顾问。四年前,他在听说“将JavaScript用作服务器端语言”这样的说法时,认为那是一个荒唐的想法。有那么多服务器端语言可供选择,为...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
回到顶部