标签：vue 手把手 Component Ts Vue2 import property class decorator

Vue2+Ts

上一节，搭建好vue2+ts,打开router文件下的index.ts

,先去查看home.vue

疑点重重

什么是 vue-property-decorator
打开home.vue 迎面扑来挺熟悉的代码,但又感觉哪里不太对。import我知道，这个@Component是什么玩意？vue-property-decorator又是什么？

<template>
    <div class="home">
        <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    </div>
</template>

<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>

带着上面的疑问,打开了官网。
基于类的 Vue 组件

import Vue from 'vue'
import Component from 'vue-class-component'
// @Component 修饰符注明了此类为一个 Vue 组件
@Component({ // 所有的组件选项都可以放在这里
  template: '<button @click="onClick">Click!</button>' })
export default class MyComponent extends Vue {
// 初始数据可以直接声明为实例的
  property message: string = 'Hello!'
// 组件方法也可以直接声明为实例的方法
  onClick (): void { window.alert(this.message)
  }
}

原来@Component修饰符注明了此类为一个 Vue 组件,但是这块发现
官网是

import Component from 'vue-class-component'

，而项目中是

import {Component, Vue} from "vue-property-decorator";

上一个还没搞清楚又来一个,王德发!!!

突发奇想

我们可以在代码中同时引用 vue-class-component 、vue-property-decorator 然后点进源码看看到底是个啥。

import {Component, Vue} from "vue-property-decorator";
import Component from "vue-class-component";

vue-property-decorator

vue-property-decorator在源码里引用了vue-class-component

vue-class-component

原来是这样,看来我错怪王德发了。

蓦然回首

• vue-class-component: vue-class-component是一个 Class Decorator,也就是类的装饰器

• vue-property-decorator: vue-property-decorator是基于 vue 组织里 vue-class-component 所做的拓展

标签：vue,手把手,Component,Ts,Vue2,import,property,class,decorator
来源： https://blog.csdn.net/Mr_yangzc/article/details/123104869

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。