vue中provide/inject的作用-创新互联

这篇文章主要介绍了vue中provide / inject的作用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

专业领域包括网站制作、成都网站设计、电子商务商城网站建设、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，成都创新互联公司的整合解决方案结合了帮做网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，为客户提供全网互联网整合方案。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

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

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的作用”这篇文章对大家有帮助，同时也希望大家多多支持创新互联成都网站设计公司，关注创新互联成都网站设计公司行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻名称：vue中provide/inject的作用-创新互联
路径分享：http://shouzuofang.com/article/gsicg.html

网站建设知识

vue中provide/inject的作用-创新互联

Vue的优点

其他资讯