Vue+TypeScript+TSX

最新推荐文章于 2025-02-19 10:43:05 发布

csdn_meng

最新推荐文章于 2025-02-19 10:43:05 发布

阅读量401

点赞数

分类专栏： vue js 文章标签： typescript vue js

本文链接：https://blog.youkuaiyun.com/csdn_meng/article/details/115798997

版权

js 同时被 2 个专栏收录

9 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

本文详细介绍了一个使用Vue.js编写的组件示例，包括数据属性、属性、计算属性、侦听器及方法等内容，并展示了如何定义组件并在模板中使用它们。此外还介绍了组件的生命周期钩子函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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