VUE + TS项目记录 (修饰器vue-property-decorator)

安装:

npm i -S vue-property-decorator

提示:

I: 首先安装上面两个模块
II: 使用相应的模块,引入对应的模块

**

01: @Prop 属性传递

**

**

// 使用:
<h4> {{propA}} | {{propB}} | {{propC}}</h4>**

@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined;                          // 传入propA : Number类型, 要是没有传入,则使用undefined类型
  @Prop({ default: 'default value' })  readonly propB!: string;             // 传入propB : 设置默认值, ! 表示(防止编译器,不能排除null | undefined类型,手动去除)值不能是null | undefined
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined;     // 传入propC :  Number,或者布尔类型, 要是没有传入,则使用undefined类型
  

等价

props: {
    propA: {
      type: Number;
    };
    propB: {
      default: 'default value';
    };
    propC: {
      type: [String, Boolean];
    };
  };
}

**

02: @PropSync 属性传递,将传递的是作为依赖,供计算属性使用

**

// 使用:
<h4> {{syncedName}}</h4>

@Component
export default class YourComponent extends Vue {
  @PropSync('name', { type: String }) syncedName!: string // 传入name : String类型  => syncedName为计算属性,依赖于name值  (syncedName名字随便起,不能于name重名,否则报错)
}

等价

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

**

03:@Watch 监测值

**

@Component
export default class YourComponent extends Vue {
  @Watch('child')                                       // 监测的值
  onChildChanged(val: string, oldVal: string) {}        // 值发生变化时候,触发的函数
  
  @Watch('person', { immediate: true, deep: true })     // 监测preson值,进行深度监测
  onPersonChanged1(val: Person, oldVal: Person) {}
  
  @Watch('person2')
  onPersonChanged2(val: Person, oldVal: Person) {}
}
 

等价

 
watch: {
 child: function( newVal, oldVal){ ...... },
 person:{
   deep:true,
   immediate: true,
   handler(newValue, oldValue) {.....}
 },
 person2:{
   deep:true,
   immediate: false,
   handler(newValue, oldValue) {.....}
 }
}

**

04:@Provide @Inject 注入数据

**

// 使用
<h4> {{foo}} | {{keyname}} | {{aliasOptional}}</h4>

@Component
export class MyComponent extends Vue {
    // 01
  @Provide() foo = 'foo' // 注入
  @Inject() readonly foo!: string // 子组件,获取foo
     
   // 02: 传入key
  @Provide('key') anys = 'foo' // 注入
  @Inject('key') readonly keyname!: string // 子组件,获取keyname
 
   // 03: 使用默认
   @Provide('optional') anys = 'foo' // 注入
   @Inject({ from: 'optional', default: 'default' }) readonly aliasOptional!: string  // 子组件,获取optional =>  from:来自哪个字段,父组件未传入该字段, default默认值
}

**

05:@ProvideReactive@InjectReactive 响应注入数据(由于@Provide @Inject对注入的字符串,不响应数据变化,对象除外)

**

// 使用
<h4> {{anys }}</h4>

// 建议在 anys这块的命名,子组件接收到的时候,名字一致方便查看
@ProvideReactive('key') anys = 'foo' // 注入
@InjectReactive('key')  anys !: string // 获取

**

06:@Emit 触发事件

**

 // 使用

// I: 函数有返回值 => 返回值作为devEvent函数接收到的参数
<Componet @devData='devEvent' ></Componet>
@Emit('devData') // 名字一致
  devData() {
    return 10
  }
  
// II: 函数没有返回值 => 参数arg作为devEvent函数接收到的参数
<Componet @devData='devEvent' ></Componet>
@Emit('devData') // 名字一致
  devData(arg) {}

// III: 不传事件名 => 父组件名字必须小写并且分开,不然无效,其参数遵循上面所说
<Componet @dev-data='dev-event' ></Componet>
@Emit() // 不传名字
  devData(arg) {}
  

07:@Ref 绑定的DOM

使用: this.ruleFormDOM
以element ui为例, 需要指定接口类型

import { Form } from 'element-ui'; 
@Ref('ruleFormDOM') readonly ruleFormDOM: Form;

08:计算属性 get set

get desTableDataLength() {
    return this.desTableData.length - 1;
}

08: @Component 组件引入

I: 装饰器方式

@Component 
export class MyComponent extends Vue {
   .....
}

II: 装饰器函数

@Component({
  components: {
    Add: () => import('./Add.vue'),
    Edit: () => import('./Edit.vue'),
    Detail: () => import('./Detail.vue'),
    Import: () => import('./Import.vue'),
    Export: () => import('./Export.vue')
  }
})