美文网首页vuereact & vue & angular
vue-property-decorator 与 vue-cla

vue-property-decorator 与 vue-cla

作者: Cherry丶小丸子 | 来源:发表于2022-04-21 16:33 被阅读0次
    • 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-componentvue-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

    现在 vue3.x 已出,对 TS 很友好的支持,所以使用 vue3.x 的话暂时就不需要这种写法了

    相关文章

      网友评论

        本文标题:vue-property-decorator 与 vue-cla

        本文链接:https://www.haomeiwen.com/subject/uxjiertx.html