vue-property-decorator 在 vue-class-component 上增强更多的结合 Vue 特性的装饰器, 对 Vue 组件进行了一层封装,让 Vue 组件语法在结合了 TypeScript 语法更加贴近面向对象编程.并提供一个工具函数一个装饰器:
语法:
@Component(options)
说明:
options 中需要配置 decorator 库不支持的属性,
如: components, filters, directives等
example:
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
@Component({
components: {
HelloWorld
}
})
export default class Home extends Vue {}
</script>
example:
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class About extends Vue {
count = 0
msg = 'this is about page'
child: number | string = 'hello' // 定义多属性变量,划定属性类型
mounted () {
// 页面渲染完毕后执行函数
window.console.log('count =>', this.count)
}
}
</script>