在Vue2.0中使用TypeScript语法时，需要引用 vue-property-decorator。
vue-property-decorator 完全依赖于
vue-class-component
，因此在使用vue-property-decorator之前可以先了解下vue-class-component。
vue-property-decorator 把Vue2.0声明式的写法通过 es6 装饰器的方式，改造成构造函数式的写法，主要目的是让 vue 的开发模式更工程化。
Install
npm i -S vue-class-component
npm i -S vue-property-decorator
这里有几个装饰器和一个函数(Mixin):
@Prop
@PropSync
@Model
@ModelSync
@Watch
@Provide
@Inject
@ProvideReactive
@InjectReactive
@Emit
@VModel
@Component (由 vue-class-component 提供)
Mixins (mixins 函数 由 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;
changeName(): void {
this.syncedName = '子组件修改过后的syncedName!';
</script>
@Watch 监听属性
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];
vue-property-decorator - npm
vue-class-component
