zoukankan      html  css  js  c++  java
  • Vue Property Decorator Vue装饰器用法 Vue 装饰器与原生写法对比

    @prop  装饰器

    1 import { Vue, Component, Prop } from 'vue-property-decorator'
    2 
    3 @Component
    4 export default class YourComponent extends Vue {
    5   @Prop(Number) readonly propA: number | undefined //propA属性是Number类型,readonly 表示只读,number|undefined表示Prop的值可能是number或者undefined
    6   @Prop({ default: 'default value' }) readonly propB!: string // default:'' 如果没有传参 默认的值  !感叹号表示一定有值 
    7   @Prop([String, Boolean]) readonly propC: string | boolean | undefined  //[String,Boolean] 表示 propC的类型可能是string,boolean
        
    8 }
       // @Prop({ required: true, type: String, default: "" }) label?: string // required:true 表示一定有值 跟 ! 一样

    相当于

     1 export default {
     2   props: {
     3     propA: {
     4       type: Number,
     5     },
     6     propB: {
     7       default: 'default value',
     8     },
     9     propC: {
    10       type: [String, Boolean],
    11     },
    12   },
    13 }

     @PropSync 装饰器

    import { Vue, Component, PropSync } from 'vue-property-decorator'
    
    @Component
    export default class YourComponent extends Vue {
    // 'name' 是定义的Prop属性  {type:String}是表示 'name'的值是字符串类型 
    // 
    syncedName 表示一个计算属性,get就是获得'name'的值,set 就是修改name的值,然后抛出update:name事件,把value作为参数传入,就能在父组件更新name变量的值
    @PropSync('name', { type: String }) syncedName!: string 
    }

    相当于

    export default {
      props: {
        name: {
          type: String,
        },
      },
      computed: {
        syncedName: {
          get() {
            return this.name
          },
          set(value) {
            this.$emit('update:name', value)
          },
        },
      },
    }

     @Model 装饰器 

    import { Vue, Component, Model } from 'vue-property-decorator'
    
    @Component
    export default class YourComponent extends Vue {
     //'change' 表示如果修改了checked的值,那么就抛出change事件, 传入的参数就是修改之后的值 @Model(
    'change', { type: Boolean }) readonly checked!: boolean }

    相当于

    export default {
      model: {
        prop: 'checked',
        event: 'change',
      },
      props: {
        checked: {
          type: Boolean,
        },
      },
    }

     @Watch 装饰器

    import { Vue, Component, Watch } from 'vue-property-decorator'
    
    @Component
    export default class YourComponent extends Vue {
      @Watch('child')
      onChildChanged(val: string, oldVal: string) {}
    
      @Watch('person', { immediate: true, deep: true })
      onPersonChanged1(val: Person, oldVal: Person) {}
    
      @Watch('person')
      onPersonChanged2(val: Person, oldVal: Person) {}
    }

    相当于

    export default {
      watch: {
        child: [
          {
            handler: 'onChildChanged',
            immediate: false,
            deep: false,
          },
        ],
        person: [
          {
            handler: 'onPersonChanged1',
            immediate: true,
            deep: true,
          },
          {
            handler: 'onPersonChanged2',
            immediate: false,
            deep: false,
          },
        ],
      },
      methods: {
        onChildChanged(val, oldVal) {},
        onPersonChanged1(val, oldVal) {},
        onPersonChanged2(val, oldVal) {},
      },
    }
  • 相关阅读:
    Linux基础_linux发展历史
    Python基础_迭代器、生成器、模块与包
    Python基础_如何用pip安装文件
    Selenium 实现多机器部署分布式执行
    Selenium 日期控件处理和JS定位
    Selenium 无头浏览器
    Selenium 窗口和frame定位
    Selenium 自动化测试模型
    Selenium 验证码处理
    Selenium PageObject设计模式
  • 原文地址:https://www.cnblogs.com/lonelyshy/p/13899578.html
Copyright © 2011-2022 走看看