ts基础语法

1. watch

@watch（path: string, options: watchOptions = {}）
@watch装饰器接受两个参数

• path: string 类型，表示需要被监听的属性名；
• options? : WatchOptions = {} 包含两个属性；

immediate?: boolean 监听开始后是否立即调用该函数；
deep?: boolean 表示是否深度监听

案例

  @Watch('person', { immediate: true, deep: true })
  onPersonChanged(val: Person, oldVal: Person) {
    console.log(val, oldVal);
  }

2. get计算属性

get 属性名 （）{}
在结构里用时 直接{{ 属性名 }}

案例

<template>
  <div class="hello">
    <el-input v-model="msg"></el-input>
    <div><span>我是计算属性内容，在输入后面添加hell--</span>{{inputContent}}</div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class HelloWorld extends Vue {
  private msg: string = "测试";
  get inputContent() {
    return this.msg + " hello";
  }
}
</script>

3. 父传子 @Prop

案例
父组件需要为子组件绑定上为其传递值的属性
以下为子组件中获取父组件传来的值

import {Component, Prop, Vue} from 'vue-property-decorator';
export default class Demo extends Vue {
  @Prop({ default: true }) isView!: boolean;  //父组件传来的是布尔类型值
  @Prop({ default: ()=>([]) }) stageOptions!: Array; //父组件传来的是数组类型值
  @Prop({ default: ()=>({}) }) params!: Object; //父组件传来的是对象类型的值
  @Prop({ default: '' }) automationId!: string; //父组件传来的字符串类型值
  @Prop({ default: 0}) branchIndex!: number; //父组件传来的数字类型的值
  @Prop({default: noop}) formatterText?: Function; //父组件传来的函数类型的值
}

4. ts中获取minins

import FileUploadMixin from '×××js';
@Component({
    components: {
        FileItem
    },
    mixins: [FileUploadMixin]
})