provide 和 inject

用于实现祖孙组件间进行通信

• provide --> 数据提供者

  import { provide, reactive } from "vue";
  export default {
    setup() {
      let a = reactive({
        b: 3,
        c: 4,
      });
  
      //指定传递数据的名称、数据
      //此处，指定传递数据名称为'a',指定数据为 a
      provide("a", a);
  
      return { a };
    },
  };
  

• inject --> 数据接收者

  import { inject } from "vue";
  export default {
    setup() {
      //接收传递的数据
      //使用传递数据时定义的数据名称进行接收
      let b = inject("a");
  
      return { b };
    },
  };
  

  上层的组件，可以越过中间层级的组件，直接向底层的组件传递数据。上层组件使用 provide 进行数据提供，在上层组件层级下的任意后代组件，可以使用 inject 进行数据的接收。传递过程中，不需要逐层进行数据传递。