#搭建Vue+TypeScript项目(五)

vue组件

组件中使用typescript

主文件

<template>
  <div class="about">
    <div class="top">
      <h1 class="toph1" @click="numAdd(999)">点击+999</h1>
      <div>{{ num }}</div>
      <div>{{ num2 }}</div>
    </div>

    <div>
      <!-- 父子组件传递消息 -->
      <leftBar :detail="stringArr"> </leftBar>
    </div>
  </div>
</template>
<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";
// 组件
import leftBar from "./modules/left.vue";
@Component({
  components: {leftBar}
})
export default class Page1 extends Vue {
  // 简单写下typescript用法

  // 变量
  num: number = 0; // 可以有string,number,boolean
  // 数组
  myArr: any[] = [1, "李四", "张三"];
  stringArr: string[] = ["王五", "李四", "张三"];
  numberArr: number[] = [12, 432, 4534];
  // 对象
  myObj: any = {
    name: "12312"
  };
  // 其它,还可以自定义规则,以后再说
  // ...
  // 方法
  numAdd(data: number) {
    this.num += data;
  }
  // 计算属性
  get num2() {
    return this.num + 99999;
  }
  // watch
  @Watch("num")
  onNumChange(newData: any, oldData: any) {
    console.log(oldData, newData);
  }
}
</script>
<style lang="scss" scoped>
.about{
  .top{
    margin-bottom:40px;
    .toph1{
      color: #F00;
    }
  }
}
</style>

父子组件传递数据

子文件lefebar

<template>
  <div class="about">
    <div v-for="(item,index) in detail" :key="index">{{item}}</div>
  </div>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
@Component({
  components: {}
})
export default class Left extends Vue {
  @Prop({
    type: Array,
    default: []
  })
  detail!: string[];
}
</script>