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>

https://github.com/kaisa911/uni-appEatingGroup/tree/fishlan  uniapp+ typescript + vuex


版权声明:本文为gll19910602原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。