vue-property-decorator的简单介绍,一看就会

Posted 2023-04-13

参考技术A

参考: https://github.com/kaorun343/vue-property-decorator
怎么使vue支持ts写法呢,我们需要用到 vue-property-decorator, 这个组件完全依赖于 vue-class-component .

首先安装: npm i -D vue-property-decorator

@Component 装饰器可以接收一个对象作为参数，可以在对象中声明 components ，filters，directives 等未提供装饰器的选项，也可以声明 computed，watch 等

registerHooks: 除了上面介绍的将beforeRouteLeave放在Component中之外,还可以全局注册,就是registerHooks

2.@Prop(options: (PropOptions | Constructor[] | Constructor) = )

@Prop 装饰器接收一个参数，这个参数可以有三种写法：

注意:属性的ts类型后面需要加上 undefined 类型；或者在属性名后面加上!，表示 非null 和 非undefined
的断言，否则编译器会给出错误提示；

@PropSync 装饰器与 @prop 用法类似，二者的区别在于：

注意,使用PropSync的时候是要在父组件配合.sync使用的

@Model 装饰器允许我们在一个组件上自定义 v-model ，接收两个参数：

注意,有看不懂的,可以去看下vue官网文档, https://cn.vuejs.org/v2/api/#model

@Watch 装饰器接收两个参数：

发生在 beforeCreate 勾子之后， created 勾子之前

@Ref 装饰器接收一个可选参数，用来指向元素或子组件的引用信息。如果没有提供这个参数，会使用装饰器后面的属性名充当参数

@Provide(key?: string | symbol) / @Inject(options?: from?: InjectKey, default?: any | InjectKey)` decorator

提供/注入装饰器,
key可以为string或者 symbol类型,

相同点:Provide/ProvideReactive提供的数据,在内部组件使用Inject/InjectReactive都可取到 不同点:
如果提供( ProvideReactive )的值被父组件修改，则子组件可以使用 InjectReactive 捕获此修改。

demo地址: https://github.com/slailcp/vue-cli3/tree/master/src/pc-project/views/manage

vue-property-decorator使用指南

在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) 

其它详见文档