基于TSX的Vue3组件开发技能

jsx的集成参考vue3最新开发环境篇相关小节。本教程介绍tsx在vue组件开发中的使用技巧，作为大家学习和工作的参考指南。

tsx快速入门

编写一个HelloWorld.tsx组件：

import {
   
    defineComponent } from 'vue'

// 通过defineComponent来实现setup语法和jsx风格的组件模板渲染
export default defineComponent({
   
   
	// 组件名
	name: 'HelloWorld',
	// 组件属性定义
	props: {
   
   
		// 定义一个string类型非必需的msg属性
		msg: {
   
   
			type: String,
			required: false,
			default: 'Hello World!'
		}
	},
	// 在setup方法种实现数据模型、事件定义以及模板渲染等逻辑
	// 参数可接收组件属性定义对象、vue上下文中可注入的组件实例，如：slots、emit、expose等
	setup(props, ctx) {
   
   
		console.log(props, ctx)
		// 解构属性
		const {
   
    msg } = props
		// jsx语法返回的模板渲染内容
		return () => (
			<div>{
   
    msg }</div>
		)
	}
})

注意jsx的html模板语法中{ ... }用来绑定变量，而( ... )用于容纳标签元素。

在App.tsx中引入和使用：

import {
   
    defineComponent } from 'vue'
// 引入组件
import HelloWorld from './components/HelloWorld'

// 通过defineComponent来实现setup语法和jsx风格的组件模板渲染
export default defineComponent({
   
   
	// 在setup方法种实现数据模型、事件定义以及模板渲染等逻辑
	// 参数可接收组件属性定义对象、vue上下文中可注入的组件实例，如：slots、emit、expose等
	setup(props, ctx) {
   
   
		console.log(props, ctx)
		// jsx语法返回的模板渲染内容
		return () => (
			<div>
				{
   
   /* 使用组件 */}
				<HelloWorld />
			</div>
		)
	}
})

npm run dev，页面展示：

在这个示例基础上加上计数器功能。

import {
   
    ..., ref } from 'vue'

export default defineComponent({
   
   
	...
	setup(props, ctx) {
   
   
		...
		// 响应式变量声明
		const count = ref(0)
		// 定义click处理函数
		const handleCount = () => {
   
   
			// 操作响应式变量的值，自增
			count.value++
		}
		return () => (
			// 空标签类似于vue2中template标签的作用
			<>
				<h3>{
   
    msg }</h3>
				{
   
   /* jsx中事件固定命名onXxx，jsx模板中获取响应式变量的值要用value来获取！！ */}