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~

若是文章有错误或者建议，请在评论区指出，很是感谢~