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

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 有什么用处，希望对大家有所帮助！

赞 (0)

相关推荐

  • 详解Vue实战指南之依赖注入(provide/inject)

    案例 UI美眉说咱家的选项菜单太丑了,小哥哥能不能美化一下呀,洒家自然是说小意思啦~ 自定义一个select组件,so easy~ 简单粗暴型: <el-select v-model="favourite" :option="[]"></el-select> option作为数据进来就ok啦. 然后发现下列问题: key-value,不是所有的接口都是id-name option要disabled 怎么办? option存在几种情况怎么办?

  • Vue 2.0 中依赖注入 provide/inject组合实战

    用法 -------------------------------------------------------------------------------- 先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件得资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和inject需要配合使用,它们的含义如下: provide        ;一个对象或返回一个对象的函数,该对象包含可注入起子孙的属

  • vue中使用[provide/inject]实现页面reload的方法

    在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面会一闪等 所以建议使用[provide/inject]实现刷新 该方法t简单的来说就是在父组件中 1.设置provider 2.然后在子组件中通过inject调用 3.在需要执行的地方直接调用方法即可 总结 以上所述是小编给大家介绍的vue中使用[provide/inject]实现页面reload的方法,希望对大家有所帮助,如果大家有任何疑问请给我留

  • Vue.js中provide/inject实现响应式数据更新的方法示例

    vue.js官方文档:https://cn.vuejs.org/v2/api/#provide-inject 首先假设我们在祖辈时候传入进来是个动态的数据,官方不是说如果你传入了一个可监听的对象,那么其对象还是可响应的么? parent父页面: export default { provide() { return { foo: this.fonnB } }, data(){ return { fonnB: 'old word '} } created() { setTimeout(()=>{

  • vue中的provide/inject的学习使用

    vue中的provide/inject的学习使用

    前言 最近在看element-ui的源码,发现了一个这样的属性:inject.遂查看官网provider/inject provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. 需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据.而不是局限于只能从当前父组件的prop属性来获取数据. 下面我们来验证下猜想: first:定义一个parent component <template

  • 详解Vue 多级组件透传新方法provide/inject

    provide / inject 是 2.2 新增的方法,可以以一个祖先组件向所有子孙后代注入依赖(一个内容). provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. Vue 官方警告: provide 和 inject 主要为高阶插件/组件库提供用例.并不推荐直接用于应用程序代码中. 当然,警告只是警告,你完全可以正常使用. 使用方法非常像 data 和 props 的组合大礼包: var Provider = {

  • vue父组件给子组件的组件传值provide inject的方法

    一般情况下我们父子之间的传值用的是props,这个就不多说了,但是如果想让父给子组件的组件传值怎么办呢,这里我们就可以用到 provide 和 inject(依赖注入) provide/inject需要一起使用,我们可以从父组件的provide传值,子组件或者孙组件,就可以用inject来接受子组件的provide属性值 具体的可以看官网介绍provide/inject:https://cn.vuejs.org/v2/api/#provide-inject 下面我们可以写个简单的例子来演示一下

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

    1.前言 vue的父子组件通信用什么? :prop和$emit的组合. 如果是爷孙组件呢? :那么就要用父组件来转发数据和事件了. 如果是太爷爷和孙子组件呢? :当然是vuex啦 emmm 好的,没我啥事了,我这就走. 不行,我还能再挣扎一会儿!肯定有一部分兄弟做的项目比较小,组件通信的情况不是很多,懒得引入vuex,那么provide/inject就是爷孙(不限于爷孙/父子,中间隔了多少级都可以)通信问题的最好解决方案啦! 2.官方文档抄过来的介绍 这对选项需要一起使用,以允许一个祖先组件向其

  • 浅析Vue 中的 render 函数

    render函数是什么 简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM 因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程. 当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具.官网上给他起了个名字叫createElement.还有约定的简写叫h, vm中有一个方法_c,也是这个函数的别名 先看官网对

  • 浅析vue中的nextTick

    浅析vue中的nextTick

    背景 vue是异步渲染的,当data改变之后,DOM不会立刻被渲染,页面渲染时会将data的修改做整合,多次data修改只会做整合最后一次性渲染出来,这也是异步渲染的原因.只有异步渲染才可以实现整合操作. 例子 methods: { update() { for (let i = 0; i < 10; i++) { this.testNum = this.testNum + i; } }, }, 在你的 Vue 视图中, testNum 会发生变化.不过需要注意的是这个变化的过程,虽然我们把 f

  • 浅析vue中的组件传值

    目录 一.正向传值 验证写法 props验证 更多验证 二.逆向传值 自定义事件 实现逆向传值 三.同胞传值/兄弟传值 low的方式(了解) 中央事件总线 eventBus 前言: 只要是做项目,组件和组件之间的传值是不可避免的,那么怎样才能完成组件之间的传值呢?我总结了以下几点,若有不足,欢迎补充 一.正向传值 基本写法: props:[“接收变量1”,“接收变量2”.......] 使用: 1,在需要接收数据的子组件中,定义props设置接收变量 <template> <div>

  • 浅析Vue中Virtual DOM和Diff原理及实现

    目录 0. 写在开头 1. vdom 2. Diff 0. 写在开头 本文将秉承Talk is cheap, show me the code原则,做到文字最精简,一切交由代码说明! 1. vdom vdom即虚拟DOM,将DOM映射为JS对象,结合diff算法更新DOM 以下为DOM <div id="app"> <div class="home">home</div> </div> 映射成VDOM { tag: '

  • 深入浅析Vue中的slots/scoped slots

    一直对Vue中的slot插槽比较感兴趣,下面是自己的一些简单理解,希望可以帮助大家更好的理解slot插槽 下面结合一个例子,简单说明slots的工作原理 dx-li子组件的template如下: <li class="dx-li"> <slot> 你好! </slot> </li> dx-ul父组件的template如下: <ul> <dx-li> hello juejin! </dx-li> <

  • 浅析vue中常见循环遍历指令的使用 v-for

    vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标 运行代码: <body> <div class="box"> <ul> <li v-for="value in arr">{{value}}</li><br> <li v-for="(valu

  • 浅析Vue中method与computed的区别

    在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. computed称为计算属性,顾名思义,计算就要返回一个计算的结果,所以,当我们要处理大量的逻辑,但是最后要取得最后的结果的时候可以用computed: 为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模

随机推荐