Vue单文件组件的三种写法

2020-08-15 424 阅读1分钟

这篇笔记为学习ts的一些内容后对vue单文件组件写法的一些总结，三种写法分别为：

使用JS对象---没什么能说的，就是最基础版

export default { data, props, methods, created, ... }

使用TS类---相对最麻烦，但很严谨，同时能学到更多东西

export default class RUA extends Vue{
rua:string = 'hi'       
 //如果已经赋予一个值，TS会自己猜它的类型，这里 :string可以不写
@Props(Number) xxx: number | undefind;
//括号中的Number是在告诉Vue：xxx是一个Number。
// 而后面的 number | undefind 则告诉TS：xxx的类型是number或者undefined
//这使得之后是所有关于xxx的使用都会被TS检测，错误内容会触发编译错误直接展示在控制台
}

使用JS类---对于TS类写法的一种妥协,将所有错误留到最后解决

JS也支持类的写法，且不需要通过冒号添加类。

export default class RUA extends Vue{
 rua = 'hi'
 @Props(Number) xxx
}