vue的provide-inject-有什么用

jiezi

5 年前

vue 的父子组件通信用什么？
：prop 和 $emit 的组合。
如果是爷孙组件呢？
：那么就要用父组件来转发数据和事件了。
如果是太爷爷和孙子组件呢？
：当然是 vuex 啦
emmm 好的，没我啥事了，我这就走。

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

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

provide 选项应该是

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

inject 选项应该是：

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

// 祖先组件 提供 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 这个数据了，因为它已经被父级占有。

如果你使用过 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 中写道的 对象的属性 是可以响应的

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

全局变量？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 中的方法，变身为全局方法！}
}

这个也是可响应的噢~

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'],  
}

vue 中有这样的提示

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

provide/inject 平时用的比较少，多数用于开发组件，但某些情况下还是很好用的。
业务庞大而复杂的，还是建议使用vuex~

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

vue的provide-inject-有什么用

1. 前言

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

3. 基本用法

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

5. 实现全局变量

6. 实现页面刷新

7. 结尾