vue中provide和inject

provide：提供依赖,是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。

inject： 注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。

使用场景：

由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

使用方式

在最外层组件中

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  name: "App",
  provide() {
    return {
      appOption:this,
      reload: this.reload,
      isRouterShow:this.isRouterShow
    };
  },
  data() {
    return {
      isRouterShow: true
    };
  },
  methods: {
      reload(){
         console.log("我是方法reload")  
    }
 },
  created () {}
};
</script>
<style lang="scss">
</style>

在孙组件中

<template>
  <div id="app1">
{{ isRouterShow }}-----{{appOption.isRouterShow}}
  </div>
</template>

<script>
export default {
  name: "App1",
 inject:['appOption','reload','isRouterShow'],
  data() {
    return {
    };
  },
  methods: {
     
 },
   mounted() {
    this.reload()
  },
};
</script>
<style lang="scss">
</style>