vue中provide和inject 用法

provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

provide() 可以传给所有子组件
所有的子组件 可以用 inject 接收 可以大范围使用

provider/inject 是不可响应的

父组件传给子组件

  data () {
    return {
      isTreeStatus: true
  },

// 父组件中返回要传给下级的数据
  provide () {
    return {
      isTreeStatus: this.isTreeStatus
    }
  },

子组件可以用 inject 接收

<template>
 <div v-if="isTreeStatus" class="loading"> </div>
</template>

props: {
  params: {
    type: Object,
    default: () => ({})
  }
},
inject: ["isTreeStatus"],

也可以传数组

  data() {
    return {
      datas: [
        {
          id: 1,
          label: "产品一",
        },
        {
          id: 1,
          label: "产品二",
        },
        {
          id: 1,
          label: "产品三",
        },
      ],
    };
  },
  provide() {
    return {
      datas: this.datas,
    };
  },

子组件接收

<template>
  <div>
    <ul>
      <li v-for="(item, index) in datas" :key="index">
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>
    <script>
export default {
  inject: ["datas"],
};
</script>