vue2.x项目中ts写法

项目

使用 vue-cli 直接生成的 vue2+ts 项目。

Vue组件的编写

vue组件里大多数的方法改成通过 @xxx（装饰器）来表明当前定义的数据。

基本文件结构

模板 template 和样式 style 的写法不变，script 的模块进行了改变：

<script lang="ts">
import {
    
     Component, Vue } from 'vue-property-decorator'

@Component
export default class App extends Vue {
    
    
 // ...
}
</script>

data() 中数据

@Component
export default class App extends Vue {
    
    
 message1: number = 2
 message2: string = "真好看"
 // ...
}

生命周期函数

@Component
export default class App extends Vue {
    
    
 // ...
 created() {
    
    }
}

methods 方法

@Component
export default class App extends Vue {
    
    
 // ...
 init() {
    
    }
}

computed 计算属性

@Component
export default class App extends Vue {
    
    
  // ...
  get breadcrumData() {
    
    
    return this.$route.meta ? this.$route.meta.title : 'N/A' 
  }
}

components 组件引入

import MyComponent from './xxx/my-component'

@Component({
    
    
  components: {
    
    
	MyComponent
  }
})
export default class App extends Vue {
    
    
  // ...}
}

prop传值

import {
    
     Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class App extends Vue {
    
    
  @Prop({
    
     default: () => [] }) readonly options?: []
  // ...
}

emit

import {
    
     Component, Vue, Emit } from 'vue-property-decorator'

@Component
export default class App extends Vue {
    
    
  @Emit('input')
  changeHandler() {
    
    
    return this.seleted
  }
  // ...
}

上面代码相当于

methods: {
    
    
  // 当子组件中 select 元素绑定了 @change="changeHandler"
  changeHandler() {
    
    
    this.$emit('input', this.selected)
  }
}

自定义组件的v-model

// 父组件
<div>
  <child v-model="events"></child>
</div>

// 子组件
<el-select v-model="selected" @change="changeHandler"></el-select>
@Component
export default class Child extends Vue {
    
    
  @Emit('change')
  changeHandler() {
    
    
    return this.selected
  }
  // model 绑定为动态双向绑定
  @Model('change') selected!: []
}

父组件通过ref调用子组件属性和方法

<div>
  <!-- 子组件 -->
  <AddDialog ref="AddRef" />
</div>

import {
    
     Component, Vue, Ref } from 'vue-property-decorator'
import AddDialog from './add.vue'

@Component({
    
    
  components: {
    
    
    AddDialog
  }
})
export default class App extends Vue {
    
    
  @Ref() readonly AddRef: any
  
  private addHandler(): void {
    
    
    this.AddRef.dialogVis = true
    // 原来的写法是：this.$refs.AddRef.dialogVis = true
  }
}

当使用装饰器 @Ref() readonly AddRef 时，在调用 AddRef 这个变量时会自动从 $refs 中获取。

mixin

// MyMixin.ts文件
import {
    
     Component, Vue } from 'vue-property-decorator'

@Component
export default MyMixin extends Vue {
    
    
  public category = '' // 在不同的组件中给category赋值不同的值
}

// 使用的.vue组件
import {
    
     Component, Mixins } from 'vue-property-decorator'
import Mymixin from "./MyMixin"

@Component
export default class DefaultField extends Mixins(MyMixin) {
    
    
  protected category = 'system'
}