• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

开发技术 开发技术 3天前 3次浏览

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>
 

程序员灯塔
转载请注明原文链接:vue(37)vue中provide和inject的使用及在CompositionAPI中使用
喜欢 (0)