Vue 爷孙组件通讯之：Provide / Inject 详细介绍

本文链接：https://blog.csdn.net/A_one2010/article/details/139500723

背景

在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，层层传递非常麻烦。

对于这种情况，我们可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。

这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

vue2中的使用：

使用1： A->C 传递数据；

假设有一个组件A，A组件引入B组件（A为B的父组件），B组件引入C组件（B为C的父组件），即A为C的祖先组件，此时二者可以使用provide / inject进行通信。

-------------------------------- A 组件 ---------------------
<template>
  <div>
    <B></B>
  </div>
</template>
 
<script>
import B from "./B.vue";
export default {
  name: "A",
  components: {
    B
  },
  provide:{
    name:"我是A提供的数据name",    // 这种情况下，非响应式，可以写成return的形式作为响应式
  },
    provide:{
        return {
            obj:this.obj,
            age:12,
        }
    }
   
};
</script>
------------------------------ B 组件 ---------------------------
<template>
  <div>
    <C></C>
  </div>
</template>
 
<script>