Vue单文件组件三种写法

第一种：JS 对象

将 props， data， methods，生命周期钩子等作为Vue实例对象的属性和方法。

  export default {
    props:['xxx'],
    name: 'Child',
    data() {
        return {
            a: '123'
        };
    },
    methods: {
        console.log(this.xxx);
    },
  }

第二种：JS 类

  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';
  @Component    // 声明 Vue 组件
  export default class Child extends Vue{
     a = 'hi'    // a 不需要声明类型
  }

第三种：TS 类

 // 需要事先声明lang="ts"

  import Vue from 'vue';
  import {Component, Prop} from 'vue-property-decorator';
  @Component    // 声明 Vue 组件
  export default class Child extends Vue{

     // a 需要声明类型，以分号结尾
     a: string = 'hi' ; 

     // @Prop 表明 xxx 不是一个 data
     // Number告诉 Vue, xxx 运行时是 Number
     // xxx 是属性名
     // number | undefined 就是 xxx 编译的类型
     @Prop(Number) xxx: number | undefined ;

  
     mounted() {
        if (this.xxx === undefined) {
             console.log('没有xxx');
        } else {
             console.log(this.xxx.toString());
          }
     };
  }

使用 TS 就必须进行类型声明，否则在编译时就会报错。