-
vue-class-component 官网 https://class-component.vuejs.org/
-
vue-property-decorator 官网 https://www.npmjs.com/package/vue-property-decorator
-
vue-class-component 是 vue 的官方库,作用是用类的方式编写组件,这种编写方式可以让 .vue 文件的 js 结构更扁平化,并使 vue 组件可以使用继承、混入等高级特性
-
vue2.x 对 TS 的支持并不友好,所以 vue2.x 跟 TS 的整合通常需要基于 vue-class-component 来用基于 class(类)的组件书写方式
`vue-class-component` 是 vue 官方出的
`vue-property-decorator` 是社区出的
`vue-class-component` 提供了 vue、component 等
`vue-property-decorator` 深度依赖了 `vue-class-component` 拓展出了更多操作符 @Prop @Model @Watch @Provide @Inject @Emit等
可以说是 `vue-property-decorator` 是 `vue-class-component` 的一个超集
正常开发的时候,你只需要使用 `vue-property-decorator` 中提供的操作符即可 不用再从 `vue-class-componen`引入 vue、component
vue-class-component 的基本使用
// Home.vue
<script>
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class Home extends Vue {}
</script>
如果项目中 出现 @Option 请查看这篇文章
https://blog.csdn.net/sigeo/article/details/122917166
vue-property-decorator 安装
vue-property-decorator
依赖于vue-class-component
,vue-property-decorator
是在vue-class-component
的基础上进行扩展,所以vue-class-component
有的功能vue-property-decorator
也有
使用时只需导入
vue-property-decorator
即可,但安装包时两个包都需要下载安装,如果创建项目时使用了Use class-style component syntax?
,则只需要安装vue-property-decorator
npm install --save vue-property-decorator
或者
npm install --save vue-class-component vue-property-decorator
vue-property-decorator 的基本使用
// Home.vue
<script lang='ts'>
import { Component, Vue } from vue-property-decorator;
@Component
export default class Home extends Vue {}
</script>
https://www.jianshu.com/p/aa235e040b6c
网友评论