一、概念解析

成对出现：provide和inject是成对出现的

作用：

用于父组件向子孙组件传递数据

使用方法：

provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

使用场景：

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

二、代码解析

父组件：

<template>
  <!-- 父组件 -->
  <div class="block">
    <son></son>
  </div>
</template>
<script>
import sun from "./comp/sun.vue";
import son from "./comp/son.vue";

export default {
  // 父组件通过provide将自己的数据以对象形式传出去
  provide(){
    return {
      parentValue:"我是父组件的值啊"
    }
  },
  components:{
    sun,
    son
  }
};
</script>

子组件：

<template>
  <div style="background:red">
    我是子组件
    <p>我接受父组件传递的值：{{parentValue}}</p>
    <sun></sun>
  </div>
</template>
<script>
import sun from "./sun.vue";
export default {
  // inject:["parentValue"], // 使用一个注入的值作为数据入口：
  inject:{
    // 使用一个默认值使其变成可选项
    parentValue: { // 健名
      from: 'parentValue', // 来源
      default: 'parentValue' // 默认值
    }
  },
  components:{
    sun
  },
  created(){
    console.log("this.parentValue:",this.parentValue)
  }
}
</script>

孙组件：

<template>
  <div style="background:green">
    我是孙组件
    <p>我接受父父组件传递的值：{{parentValue}}</p>
  </div>
</template>

<script>
export default {
  inject:["parentValue"],
}
</script>

结果：

我们可以查看到父组件和子组件中都可以接收到父组件传递过来的值

链接: https://fly63.com/article/detial/6778