vue2项目引入ts实操记录(三)

继续修改.vue文件

1.对象遍历

/**
 * 用于对象的遍历
 */
interface IObject {
  [key: string]: any,
  [key: number]: any
}


for (const key in obj) {
	console.log((obj as IObject)[key])
}

**2.Model的用法

// @Model装饰器允许我们在一个组件上自定义v-model，接受两个参数:event: string类型，表示事件名；options: PropOptions | Constructor[] | Constructor与@Prop的第一个参数一致；
import { Vue, Component, Model } from 'vue-property-decorator'
 
@Component
export default class YourComponent extends Vue {
  @Model('change', { type: Boolean }) readonly checked!: boolean
}
// 等同于
export default {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    checked: {
      type: Boolean,
    },
  },
}

如下例子

// 父组件
<template>
  <div class="Model">
    <ModelComponent v-model="val" value="some value"></ModelComponent>
    <div>父组件 value: {{val}}</div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ModelComponent from './ModelComponent.vue';
 
@Component({ components: {ModelComponent} })
export default class ModelPage extends Vue {
  private val = 'hello';
}
</script>
 
// 子组件
<template>
  <div class="child">
    子组件:<input type="text" :value="inputValue" @input="inputHandle($event)"/>
  </div>
</template>
 
<script lang="ts">
import {Component, Vue, Model} from 'vue-property-decorator';
 
@Component
export default class ModelComponent extends Vue {
   @Model('change', { type: String }) readonly inputValue!: string
 
   public inputHandle(event): void {
     this.$emit('change', event.target.value); 
   }
}
</script>