当前位置：首页 > news >正文

vue2 vue-property-decorator 库就类似于Java的注解库 vue class类编程

news 2025/9/7 13:31:02

安装

npm install vue-property-decorator vue-class-component --save

依赖关系：
vue-class-component 提供了 Vue 的类式写法支持。
vue-property-decorator 基于 vue-class-component，封装了一些常用的装饰器。

基本用法

<template><div><h1>{{ msg }}</h1><button @click="increment">Count: {{ count }}</button></div>
</template><script lang="ts">
import { Vue, Component } from 'vue-property-decorator'@Component
export default class HelloWorld extends Vue {// 普通 datamsg: string = 'Hello Vue2 + TS'count: number = 0// 方法increment() {this.count++}
}
</script>

. 常用装饰器

@Prop —— 定义 props

import { Vue, Component, Prop } from 'vue-property-decorator'@Component
export default class Child extends Vue {@Prop({ type: String, required: true }) readonly title!: string@Prop({ type: Number, default: 0 }) readonly count!: number
}@Prop(String) readonly name!: string;
@Prop({ type: Number, default: 18 }) readonly age!: number;

@Emit —— 定义自定义事件

import { Vue, Component, Emit } from 'vue-property-decorator'@Component
export default class Child extends Vue {count = 0@Emit('update') // 事件名为 "update"increment(step: number) {this.count += stepreturn this.count // 会作为事件参数 emit 出去}
}
<Child @update="val => console.log(val)" />

@Watch —— 监听数据变化

import { Vue, Component, Watch } from 'vue-property-decorator'@Component
export default class MyComp extends Vue {count = 0@Watch('count', { immediate: true, deep: false })onCountChange(newVal: number, oldVal: number) {console.log(`count: ${oldVal} -> ${newVal}`)}
}

@Provide / @Inject —— 依赖注入

import { Vue, Component, Provide } from 'vue-property-decorator'@Component
export default class Parent extends Vue {@Provide('theme') theme = 'dark'
}

子组件：

import { Vue, Component, Inject } from 'vue-property-decorator'@Component
export default class Child extends Vue {@Inject('theme') readonly theme!: string
}

生命周期钩子

import { Vue, Component } from 'vue-property-decorator'@Component
export default class Example extends Vue {created() {console.log('组件已创建')}mounted() {console.log('组件已挂载')}
}

计算属性 (get/set)

import { Vue, Component } from 'vue-property-decorator'@Component
export default class Example extends Vue {firstName = 'Tom'lastName = 'Jerry'get fullName() {return `${this.firstName} ${this.lastName}`}set fullName(val: string) {const [first, last] = val.split(' ')this.firstName = firstthis.lastName = last}
}

完整示例

<template><div><h1>{{ title }}</h1><p>Count: {{ count }}</p><button @click="increment(2)">+2</button><Child :title="title" :count="count" @update="onUpdate" /></div>
</template><script lang="ts">
import { Vue, Component, Prop, Emit, Watch } from 'vue-property-decorator'
import Child from './Child.vue'@Component({ components: { Child } })
export default class Parent extends Vue {title: string = '父组件标题'count: number = 0@Watch('count')onCountChange(newVal: number, oldVal: number) {console.log(`父组件 count: ${oldVal} -> ${newVal}`)}@Emit('update-count')increment(step: number) {this.count += stepreturn this.count}onUpdate(val: number) {this.count = val}
}
</script>