vue(37)vue中provide和inject的使用及在CompositionAPI中使用

1.provide用于在根组件中分享自己组件的变量，inject用于在所有根组件的子组件中注册使用根组件中分享出来的变量。

 

 

2.正常vue中使用provide和inject：

根组件：

<script>

export default {

  name:'root',

  data(){

    return {

      name:'tom'

    }

  },

  provide(){//这里就是父组件分享自己的name属性

    return {

      name:this.name

    }

  }

};

</script>

 

任意子组件中注册使用：

<script>

export default {

  name:'root',

  inject:['name']//子组件中注册使用上面父组件分享的name变量

};

</script>

注意：当父组件改变name变量时候子组件中的name变量不会改变即不是响应式的。

 

3.CompositionAPI中使用provide和inject，它是响应式的：

根组件：

<script>

import { ref, reactive, readonly, toRefs, computed, watch ,provide,inject} from "vue";

export default {

 setup(){

   let name= ref('tom');

   let user = reactive({

   　　name:''tom,

   　　age:10

   });

   provide("name",name);//分享自己的name属性

   provide("user",user );//分享自己的user对象

   return{

     name,

　...toRefs(user)

   }

 }

};

</script>

子组件：

<script>

import { ref, reactive, readonly, toRefs, computed, watch ,provide,inject} from "vue";

export default {

 setup(){

   let name = inject('name');//注入name属性

   let user = inject('user');//注入user对象

   return{

     name,

     user

   }

 }

};

</script>