[vue3]vue3中引入class类的写法

最新推荐文章于 2025-02-22 15:30:00 发布

原创最新推荐文章于 2025-02-22 15:30:00 发布 · 7k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

vue3+ts 专栏收录该内容

31 篇文章

订阅专栏

本文档介绍了如何在Vue3项目中使用TypeScript创建一个名为Topu的类，并详细阐述了类的定义、构造函数以及方法的实现。之后，在Vue组件中引入并实例化这个类，调用其方法进行操作。这个例子展示了Vue3结合TypeScript的类定义和使用方式。

1-在src/utils/topu下创建一个ts文件 topu.ts

class Topu {
	// Topu类中涉及到的变量，都要提前在这个部分定义好
	width: Number;		// 结尾必须顿号，不然报错
	height: Number;
	data: any;
	edges: any;	
	svg: any;
	...  // 有多少就定义多少，这是vue3+ts的写法，如果是vue2的话，不用事先声明，直接在constructor里面this.变量名，Topu类上就会出现该变量
	
	constructor(option) {		// 形参，实参会在实例化这个类的时候传进来
		console.log(this)		// this指向的是Topu这个类
		this.data = option		
	}
	
	// 写函数，挂载在Topu类上的函数，调用时就用this.函数名()即可
	函数名() {
		...
	}
	
	// 如果当前这个类中的方法比较多，还需同时调用，可以再写个方法，将其他方法都写在里面，最后只调用这一个就好
	render() {
		this.函数1()
		this.函数2()
		this.函数3()
		...
	}	
}

2- 在vue文件中引用这个Topu类

<script>
// 引入类
import Topu from '@/utils/Topu.ts'

// 使用类
let T = new Topu(optionData)
T.render()		// 调用Topu类中的方法
</script>