vue-property-decorator使用指南

2019-08-14 10:15:34来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

在Vue中使用TypeScript时,非常好用的一个库,使用装饰器来简化书写。

1、安装npm i -S vue-property-decorator

  • @Prop
  • @PropSync
  • @Provide
  • @Model
  • @Watch
  • @Inject
  • @Provide
  • @Emit
  • @Component (provided by vue-class-component)
  • Mixins (the helper function named mixins provided by vue-class-component)

2、@Component

即使没有组件也不能省略@Component,否则会报错。

import {Component,Vue} from 'vue-property-decorator';
import {componentA,componentB} from '@/components';

 @Component({
    components:{
        componentA,
        componentB,
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus()
            }
        }
    }
})
export default class YourCompoent extends Vue{
   
}

3、@Prop 父子组件之间值的传递

@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) decorator

import { Vue, Component, Prop } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined
  @Prop([String,Number]) propB:string|number;
  @Prop({
    type: String,// type: [String , Number]
    default: 'default value', // 一般为String或Number
    //如果是对象或数组的话。默认值从一个工厂函数中返回
    // defatult: () => {
      // return ['a','b']
    // }
    required: true,
     validator: (value) => { return [ 'InProcess', 'Settled' ].indexOf(value) !== -1 } }) propC:string;
}

注意title参数中的感叹号。如果需要设置为true或者有默认道具,我只使用它。如果没有,那么你应该使用| undefined。

“明确的赋值断言是一个特性,允许在实例属性和变量声明之后放置!以向TypeScript传递一个变量确实被分配用于所有意图和目的,即使TypeScript的分析无法检测到它。”

@Componentexport default class MyComponent extends Vue {
  @Prop({ required: true }) title!: string
  @Prop() optionalItem: string|undefined
}

4、@Emit

@Emit(event?: string) decorator

import { Vue, Component, Emit } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  count = 0
 
  @Emit()
  addToCount(n: number) {
    this.count += n
  }
 
  @Emit('reset')
  resetCount() {
    this.count = 0
  }
 
  @Emit()
  returnValue() {
    return 10
  }
 
  @Emit()
  onInputChange(e) {
    return e.target.value
  }
 
  @Emit()
  promise() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }
}

5、@Watch

@Watch(path: string, options: WatchOptions = {}) decorator

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) {}
}

其它详见文档

 

 

 

 


原文链接:https://www.cnblogs.com/gxp69/p/11212395.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript中的普通函数与构造函数比较

下一篇:原生js实现放大镜效果