vue + ts 使用

vue + ts 使用

vue-property-decorator 属性

    @Component (from vue-class-component)
    @Prop
    @PropSync
    @Emit
    @Model
    @Watch
    Mixins (the helper function named mixins defined at vue-class-component)
    

模板

<template></template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    @Component
    export default class App extends Vue {}
</script>

<style lang="scss" scoped></style>   

基础

export default class App extends Vue{
    // data值
    private msg:string = 123;

    // 声明周期钩子
    mounted () {...}
    
    // 计算属性 computed
    get computedMsg () {
          return 'computed ' + this.msg;
        }
    
    // 方法
    change() {
      alert('change:  ' + this.msg);
    }
}

@Component

    import { Component } from 'vue-property-decorator'
    @Component({
        components:{
            componentA,
            componentB,
        },
        directives: {
            ...
        }
    })
    export default class App extends Vue{}

@Prop

    import { Component, Vue, Prop} from 'vue-property-decorator';
    @Component
    export default class Content extends Vue {
      // 确定为string属性 -> !: string
      @Prop({default: '200px'}) private navWidth!: string;
      @Prop({default: false}) private isCollapse: boolean | undefined;
      @Prop([String, Boolean]) private ym: string | boolean | undefined;
    }

@Emit

    <template>
        <div @click="toggleSlider">收缩</div>
    </template>

    import { Component, Vue, Emit } from 'vue-property-decorator';
    @Component
    export default class Content extends Vue {
      @Emit ('toggleMenu')
      private toggleMenu(isCollapse: boolean) {}
        
      private toggleSlider() {
        this.toggleMenu(!this.isCollapse);
      }
    }

@Model

    <template>
        <input type="checkbox" :checked="checked" @change="changeVal"/>
    </template>
    
    import { Component, Vue, Emit, Model } from 'vue-property-decorator';
    @Component
    export default class Content extends Vue {
       @Model("change") checked!:number;
       
       changeVal(event: any){
           this.$emit("change", event.target.value)
       }
    }

@Watch

    <template>
        <input @change="changeVal" value="msg" />
    </template>
    
    import { Component, Vue, Watch } from 'vue-property-decorator';
    @Component
    export default class Content extends Vue {
       private msg:string = "";
       
       @Watch("msg");
       changeVal(newVal:string, oldVal:string){
           ...
       }
    }

Minix

import Component, { mixins } from 'vue-class-component';
import MyMixin from './mixin.js'

@Component
export class MyComp extends mixins(MyMixin) {
  created () {
    console.log(this.mixinValue) // -> Hello
  }
}