provide/inject 的用法

provide 可以在父组件以及祖先组件中可以定义方法，而在子组件或者任何后代组件中，我们都可以使用 inject 来接收 provide提供方法。

官网：

provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }
详细：

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

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

inject 选项应该是：

一个字符串数组，或
一个对象，对象的 key 是本地的绑定名，value 是：
在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
一个对象，该对象的：
from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
default property 是降级情况下使用的 value
提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
示列
// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

我自己在项目中的用法

在祖先组件中定义好数据，在后代组件中取，祖先数据如果改变，那就在后代组件中监听该方法

//祖先组件
<template>
  <div>
       祖先组件页面-----
   </div>
</template>
 
<script>
export default {
  data() {
    return {
     showIsFile: {
        ifFlag: false,
        num: 0,
      },
    };
  },
 provide() {
    return {
      showTopic: this.showIsFile,
    };
  },
  mounted() {
    getIsFile(val) {
      console.log("getIsFile",val);
      this.showIsFile.ifFlag = val;
      this.showIsFile.num++;
    },
  },
};
</script>

//后代组件
<template>
  <div>
       后代组件页面-----
   </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
 inject: ["showTopic"],
 watch: {
    showTopic: {
      handler(value) {
       conle.log(value)
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>