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>
