vue使用typescript / uniapp 使用typescript

<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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章