zoukankan      html  css  js  c++  java
  • 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>
     
  • 相关阅读:
    mysql 用户表结构设计,第三方登录
    linux centOS服务器部署ssh,免密码登陆linux
    linux SSH免密码登录远程服务器
    java反射机制学习笔记
    jvm知识
    类继承相关信息
    拦截器和过滤器的执行顺序和区别
    实现Map按key或按value排序
    喜欢的句子
    sql 性能优化相关--总结别人的总结,未做验证,先归纳
  • 原文地址:https://www.cnblogs.com/maycpou/p/15037989.html
Copyright © 2011-2022 走看看