在Vue3中使用Provide / Inject

前面已经讲了浅谈Vue2中provide和inject使用，今天讲讲在Vue3中如何使用provide和inject

Vue3的写法已经和Vue2有所不同，因此需要熟悉Vue3的写法，其实变动不大，现在官方文档也有详细介绍，有兴趣的可以去了解.

1 使用 Provide

在 setup() 中使用 provide 时，我们首先从 vue 显式导入 provide 方法。这使我们能够调用 provide 时来定义每个 property。

provide 函数允许你通过两个参数定义 property：

1. property 的 name (<String> 类型)

2. property 的 value

   

    

     

      

     
     

      

       import { provide } from "vue";
      
     
    

     

      

     
     

      

       export default {
      
     
    

     

      

     
     

      

         setup() {
      
     
    

     

      

     
     

      

           provide("data", "给子孙的数据");
      
     
    

     

      

     
     

      

         }
      
     
    

     

      

     
     

      

       };
      
     
   
  

上面这种方式传递String类型，还可以传递对象类型

   

    

     

      

     
     

      

       import { provide } from "vue";
      
     
    

     

      

     
     

      

       export default {
      
     
    

     

      

     
     

      

         setup() {
      
     
    

     

      

     
     

      

           provide("data", {
      
     
    

     

      

     
     

      

             data1: "给子孙的数据1",
      
     
    

     

      

     
     

      

             data2: "给子孙的数据2"
      
     
    

     

      

     
     

      

           });
      
     
    

     

      

     
     

      

         }
      
     
    

     

      

     
     

      

       };
      
     
   
  

2 使用 inject

在 setup() 中使用 inject 时，还需要从 vue 显式导入它。一旦我们这样做了，我们就可以调用它来定义如何将它暴露给我们的组件。

inject 函数有两个参数：

1. 要注入的 property 的名称

2. 一个默认的值 (可选)

   

    

     

      

     
     

      

       import { inject } from "vue";
      
     
    

     

      

     
     

      

       export default {
      
     
    

     

      

     
     

      

         setup() {
      
     
    

     

      

     
     

      

           const data = inject("data");
      
     
    

     

      

     
     

      

           return {
      
     
    

     

      

     
     

      

             data
      
     
    

     

      

     
     

      

           };
      
     
    

     

      

     
     

      

         }
      
     
    

     

      

     
     

      

       };
      
     
   
  

设置默认值

   

    

     

      

     
     

      

       import { inject } from "vue";
      
     
    

     

      

     
     

      

       export default {
      
     
    

     

      

     
     

      

         setup() {
      
     
    

     

      

     
     

      

           const data = inject("data", "我是默认值");
      
     
    

     

      

     
     

      

           return {
      
     
    

     

      

     
     

      

             data
      
     
    

     

      

     
     

      

           };
      
     
    

     

      

     
     

      

         }
      
     
    

     

      

     
     

      

       };
      
     
   
  

3 总结

基本用法和Vue区别不大，熟悉Vue2的可以直接上手。