前言
使用typescript有一年时间了,期间遇到了很多坑,总结一下
ts的安装我就不提了,现在的开发基本都依赖于vue-cli脚手架,安装的时候勾选上ts就行了
脚手架结合ts使用的区别看一段代码
常规使用
<template>
<div>
<div @click='changeData'>{{content}}</div>
</div>
</template>
// 规定类型是ts
<script lang="ts">
//引用vue-property-decorator 装饰器
import {Vue, Component} from 'vue-property-decorator';
// 组件注入
@Component
export default class Crumbs extends Vue{
// 申明变量时,不在需要申明data() {return {}}
content: '测试ts',
// 父组件流下来的数据
@Prop({default: 'zhangsan'})
name!: string
@Prop({default: '25'})
age!: number
// 申明方法时,不需要methods() {}
changeData() {
this.content = '改变内容'
}
}
</script>
在当前组件内引用其他组件
<template>
<div>
<div @click='changeData'>{{content}}</div>
<A></A>
</div>
</template>
// 假如当前组件目录下有一个组件A,引入A组件
<script lang="ts">
import A from ‘./A.vue’
// 组件注入
@Component(components: {
A,
},)
<script>