@Prop/@Emit/@Watch

@prop

子组件接收父组件传过来的参数：
参数名后面的“!:”是类型断言，就是告诉typescript我这里一定有值而且是正确的值，让他不要管了

<script lang="ts">
import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator'
@Component({
  name: 'IndexList'
})
export default class extends Vue {
  @Prop({ default: () => [] }) private data!: [];//参数是数组
  @Prop({ default: () => {return {}} }) private data!: Object;//参数是对象，注意直接写成()=>{}会报错，原因未知
  @Prop({ default: 0 }) private total!: number;
  @Prop({ default: 1 }) private page!: number;
  @Prop({ default: 20 }) private pageSize!: number;
  @Prop({
    default: () => {
      return [10, 20, 50, 100]
    }
  })
  private pageSizes!: [];
}
</script>

@Emit

<script lang="ts">
import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator'
@Component({
  name: 'IndexList'
})
export default class extends Vue {
   @Emit('update:page')
  private pageHandle(val: number) {
    return val // return将要传递的参数
  }
  private handleCurrentChange(val: number) {
    // this.$emit("update:page", val);直接调用这个也是生效的，原因未知
    this.pageHandle(val)//尽量使用这种方式触发emit
  }
}
</script>

@Watch

<script lang="ts">
import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator'
@Component({
  name: 'IndexList'
})
export default class extends Vue {
  @Prop({ default: 1 }) private page!: number;
  @Watch('page', { deep: true })
  private onPageChange(value: number) {
    if (value === 1) this.pageNo = 1
  }
}
</script>