vue-property-decorator 完全依賴于vue-class-component，因此在使用vue-property-decorator之前可以先了解下vue-class-component。

Install

npm i -S vue-property-decorator 

用法

這里有幾個裝飾器和一個函數(shù)(Mixin):

• @Prop
• @PropSync
• @Model
• @ModelSync
• @Watch
• @Provide
• @Inject
• @ProvideReactive
• @InjectReactive
• @Emit
• @Ref
• @VModel
• @Component (由 vue-class-component 提供)
• Mixins (mixins 函數(shù) 由 vue-class-component 提供)

示例

@Component
即使沒有組件也不能省略@Component，否則會報錯。

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class extends Vue { 
}
</script>

組件引用

import { Component, Vue } from "vue-property-decorator";
import DemoComponent"./DemoComponent.vue";
@Component({
  components: {
    DemoComponent
  }
})
export default class YourComponent extends Vue { 
}

@Prop 父子組件之間值的傳遞

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined 
}
</script>

相當于

export default {
  props: {
    propA: {
      type: Number,
    } 
  },
}

如果你不想設置每個prop的type類型，你可以使用reflect-metadata.

npm install reflect-metadata -D

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import 'reflect-metadata'

@Component
export default class extends Vue {
  @Prop() age!: number
}
</script>

@PropSync
相當于在父組件中添加.sync裝飾器, 使子組件也可以更新prop的值。具體查看.sync 修飾符

<script lang="ts">
import { Vue, Component, PropSync } from 'vue-property-decorator'
@Component
export default class extends Vue {
  @PropSync('name', { type: String }) syncedName!: string; // 用來實現(xiàn)組件的雙向綁定

  changeName(): void {
    this.syncedName = '子組件修改過后的syncedName!'; // 更改syncedName會更改父組件的name 
  }
}
</script>

@Watch 監(jiān)聽屬性

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

相當于：

export default {
  watch: {
    child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false,
      },
    ],
    person: [
      {
        handler: 'onPersonChanged1',
        immediate: true,
        deep: true,
      } 
    ],
  },
  methods: {
    onChildChanged(val, oldVal) {},
    onPersonChanged1(val, oldVal) {} 
  },
}

@Emit

import { Vue, Component, Emit } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Emit()
  addToCount(n: number) { 
  }

  @Emit('reset')
  resetCount() {
    this.count = 0
  } 
}

相當于：

export default {
  methods: {
    addToCount(n) { 
      this.$emit('add-to-count', n)
    },
    resetCount() { 
      this.$emit('reset')
    } 
}

mixins 混入公共方法

import { Component, Vue } from "vue-property-decorator";
import mixinsMethod from '@/plugins/mixins.js';

@Component({
  components: {},
  mixins:[mixinsMethod]
})
export default class YourComponent extends Vue { 
}

計算屬性
使用時只需 get 開頭 + 方法 + 返回值

import { Component, Vue } from "vue-property-decorator";
@Component 
export default class YourComponent extends Vue {
  type:  number = 0
  // 計算屬性
  get getName() {
    let type: any = {
      1: 'Taobao',
      2: 'Pdd',
     };
     return type[this.type];
  } 
}

[來源鏈接]：(http://www.itdecent.cn/p/03bfb12da141)