Vue+TypeScript+TSX

本文主要是介绍Vue+TypeScript+TSX，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

import {Component, Prop, Vue} from 'vue-property-decorator'
import OtherComponent from '@/components/OtherComponent'

@Component({
	components: {OtherComponent}
})
export default class Exapmle extends Vue {
	// data
	public data1? string;
	public data2 number = 1;
	
	// props
	@Prop({required: true}) public prop1!: string;
	@Prop() public prop2: number;
	
	// computed
	public get myData(){ // get
		return this.data1 + '\t' + this.data2;
	}
	public set myData(v: string){ //set
		let v_arr = v.split('\t');
		this.data1 = v_arr[0];
		this.data2 = parseInt(v_arr[2]);
	}
	
	// watch
	@Watch('data1')
	protected data1Watch(newV: string, oldV: string){
		console.log(oldV, '=>', newV);
	}
	
	// 普通方法
	public buttonClickHandle(){
		this.myData= ''
	}
	
	
	// 创建时钩子函数
	created(){
		this.data1 = 'button';
		console.log('created');
	}
	
	// 挂载时钩子函数
	mounted(){
		console.log('mounted');
	}
	
	render(){
		return (
			<div>
			/* 在tsx中.sync/.stop这样的修饰符将用 '_' 来代替 '.' 监听多个_stop_sync*/
				<button	v-on-click_stop={this.buttonClickHandle} >
					{this.myData} /* 双向绑定的 */
				</button>
				// 创建默认的slot
				{this.$scopedSlots.default}
				<OtherComponent
					on={{
						['my-event1']: (param1: any, e:Event) => console.log(param1, e),
						['my-event2']: (e:Event) => console.log(e)
					}} /* 事件监听的另一种方式 */
					attr1={this.data1} /*双向绑定的*/ 
				/>
			</div>
		)
	}
}

这篇关于Vue+TypeScript+TSX的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！