当Vue2遇见TypeScript

Ts果然是大势所趋啊，麻烦是麻烦了，但面对格式化，有什么不麻烦呢~

2020.06.11
评论
前端

文档：github文档

实例对象

export default class Xxx extends Vue

当然：<script lang="ts">

0.公共
  1. readonly只读，设置了此属性，在准备修改和执行修改时均会阻止报错
  2. private私有
  3. 定义组件时必须在最外层声明@Component
1.component引入(filter和props都可以在其中定义，props不建议)
import { Component } from 'vue-property-decorator' //导入
 
//同样是import引入，但是不能省略.vue后缀
@Component({
	components: {}，
    filters: {},
    props: {}, // 会造成props使用时警告报错不存在       
})
2.data/methods创建
//直接定义在实例中
//data
变量名称: 数据类型 = 值;
//methods
函数名称() :函数返回值{}
3.watch监听
import { Watch } from 'vue-property-decorator' //导入
 
//监听
@Wacth('监听内容',options) on监听内容Changed(newval: any,oldval: any){}
 
//options选写
//options: {
//    immediate: true,//初始化监听
//    deep：true,//深度监听 
// 	  ...原生vue属性
//}
4.computed计算属性
//get 返回名称(){}
//set 设置名称(){}
5.生命周期，写法不变，略...
6.Provide/Inject注入
import { Provide, Inject } from 'vue-property-decorator' //导入
 
//注入
@Provide() 注入常量名 = 值;
//接收
@Inject('注入常量名') 注入常量名!: any;
//当然，注意一个对象同样是响应式的
7.Emit/Prop组件通讯
import { Emit, Prop } from 'vue-property-decorator' //导入
 
//修改，这种写法会触发$emit去修改父传入的值
@Emit() changeXxx(){
	this.Xxx = 'xxx'
}
//获取
@Prop(options) private 接收名称!: any
//options内容，选写
//options: {
//    type: String,//数据类型，如果多种可能，则用[]
//    default：'xx',//未定义时值    
//}
8.Ref链点
import { Ref } from 'vue-property-decorator' //导入
 
//获取，这里的ref会默认将获取的具体内容根据名称转换为computed
@Ref() readonly ref名称!: 数据类型
//*数据类型可使用any，其他的俺也不懂
 
@Ref() readonly anotherComponent!: AnotherComponent
//相当于
anotherComponent: {
  cache: false,
  get() {
    return this.$refs.anotherComponent as AnotherComponent
  }
},
9.model语法糖
import { Model } from 'vue-property-decorator' //导入
@Model(事件名称, 参数配置) 名称!: 类型;
 
@Model('change', { type: Boolean }) readonly checked!: boolean;
 
//相当于
model: {
  prop: 'checked',
  event: 'change',
},
props: {
  checked: {
	type: Boolean,
  },
},
10.PropSync语法糖（新增）
import { PropSync } from 'vue-property-decorator' //导入
@PropSync(参数名称, 参数配置) 名称!: 类型
 
@PropSync('name', { type: String }) syncedName!: string
//相当于
props: {
  name: {
    type: String,
  },
},
computed: {
  syncedName: {
    get() {
      return this.name
    },
    set(value) {
      this.$emit('update:name', value) // 注意，这里使用sync的后缀语法糖，所以在使用组件传参时需要name.sync
    },
  },
},