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

vue-property-decorator实践（一）

news 2025/9/16 4:39:07

前言

入职新公司，使用的技术是vue2+typescript，使用的是vue-property-decorator。记录下使用的情况。

一、vue-property-decorator是什么？

`vue-property-decorator`是一个库，它是Vue.js和TypeScript的结合，提供了装饰器来帮助我们在TypeScript中更好地声明和管理组件的属性。

二、使用步骤

1.引入库

npm i -S vue-property-decorator

2.基本使用

1.基本写法

<script lang="ts">
import { Vue, Component} from 'vue-property-decorator'
//@Component表明此为vue组件
@Component({name: 'Test'
})
export default class Test extends Vue {
}

2.@Ref

<template><div><import ref="import" /></div>
</template>
<script lang="ts">
import { Vue, Component} from 'vue-property-decorator'
import import from './components/import.vue'
//@Component表明此为vue组件
@Component({name: 'Test',components: {import}
})
export default class Test extends Vue {@Ref('import') importRef!: import
}
</script>

3.@Prop

<!--子组件-->
<template><div>{{placeholder}}</div>
</template>
<script lang="ts">
import { Vue, Component} from 'vue-property-decorator'
//@Component表明此为vue组件
@Component({name: 'import',
})
export default class import extends Vue {@Prop({ type: String, default: '请选择' }) placeholder!: string
}<!--父组件-->
<template><div><import ref="import"  placeholder='请选择'  /></div>
</template>
<script lang="ts">
import { Vue, Component} from 'vue-property-decorator'
import import from './components/import.vue'
//@Component表明此为vue组件
@Component({name: 'Test',components: {import}
})
export default class Test extends Vue {@Ref('import') importRef!: import
}
</script>

4.@Watch

<template><div>{{placeholder}}</div>
</template>
<script lang="ts">
import { Vue, Component} from 'vue-property-decorator'
//@Component表明此为vue组件
@Component({name: 'import',
})
export default class import extends Vue {@Prop({ type: String, default: '请选择' }) placeholder!: string
@Watch('placeholder', { immediate: true,deep:true })valueHandler(): void {}
}