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