TypeScript总结

1. watch

// 1.先引入
import {Component, Vue, Watch} from 'vue-property-decorator';
// 2. 监听数据变化
@Watch('$route', {immediate: true}) isUserInfo(newVal: any, oldVal: any) {
   if (newVal.path === '/social' && realname == 'null' || social_type == 'null' || id_card == '') {
       this.$router.replace('/user/info')
       // 提示
       Message({
          message: '请填写个人信息',
          type: 'warning'
       })
    }
 }

2. prop

// 1.先引入
import {Component, Vue, Prop} from "vue-property-decorator";
// 2.配置
export default class UserEdit extends Vue {
    @Prop({
        type: String, // 父组件传递给子组件的数据类型
        required: true, // 是否必填
    })  keyVal !: string;
}

3. ref

问题：父组件中获取子组件实例一般会用到ref，在获取子组件中的值或者方法，但是使用的时候可以正常运行没有报错，打包的时候就会报错Property ‘scrollTop’ does not exist on type ‘Vue’。
解决方法：
1). 使用传统组件传值:value @事件名，这种解决方法会比较麻烦，但是可以解决问题
2). 添加上 as any

// 滚动到最底部
this.$nextTick(() => {
     let box= this.$refs["box"];
     (box as any).scrollTop = (box as any).scrollHeight;
})