<script lang="ts">
import {Component, Prop, Vue, Emit, Watch } from "vue-property-decorator";
import { State, Mutation, Action,namespace } from "vuex-class";
@Component({
components:{
//組件名稱
}
})
export default class swiper extends Vue{
//相當於原來的prop 這裏 !和可選參數?是相反的, !告訴TypeScript我這裏一定有值.
@Prop() swiperData!: any;
//相當於原來的data
//typescript 變量聲明規則: 變量名:類型=變量值
private name:string = 'test';
private autoplay:boolean = true;
private addTest:number =1;
private dataList:number[] = [];
// 原本Vue中的computed裏的每個計算屬性都變成了在前綴添加get的函數.
get ValA(){
return this.autoplay;
}
// @Emit()不傳參數,那麼它觸發的事件名就是它所修飾的函數名.
// @Emit(name: string),裏面傳遞一個字符串,該字符串爲要觸發的事件名.
@Emit('handleEmit')
private emitTodo(n: string){
this.ValA;
this.addTest = this.addTest + 2;
}
// watch 使用和emit 相似
//相當於監聽 addTest onChildChanged爲操作函數
@Watch('addTest')
onChildChanged(val: string, oldVal: string) {
console.log('監聽',val);
}
}
</script>