参考链接：

Vue3出来了也有好几年了吧，最近突然想建设自己的工具站，于是我又开始写前端了，并选定Vue3作为项目基础框架，Vite为基础编译工具。

笔者之前是写React的对其hook的使用非常的喜欢，所以就想说Vue3是否也可以这样玩，于是就开始了探索，发现确实可行。接下来我将演示如何编写一个tsx组件，并渲染到页面。

组件三要素

vue3组件的三要素：defineComponent，props，setup。

defineComponent是Vue3的新增方法，主要是用于替代Vue2中的Vue.extend方法，其优点在于可以更好的在ts中使用（用于类型推断），更轻量的渲染。
props不用说了，vue3和vue2都有都是用于父组件向子组件传递参数。
setup是Vue3新增的组合式API，在setup中可以同时定义参数，方法，生命周期函数等，类似于Vue2中的data，methods等独立的结构，和typescript中兼容性更好。

编写组件

首先我们编写基本框架，然后往里面填入逻辑即可，下方就是我们所编写的一个组件的基本框架。

export const 组件名称 = defineComponent({
    name: '组件名称',
    props: {
	// 传入参数
    },
    setup(props) {

       // 可以定义参数
       const data = ref('')
       // 可定义渲染方法
       const dataFunc = () => {}; 
    
        return () => (
            <>
		    // 渲染DOM
            
        )
    }
})

我们需要注意的是，在tsx中的数据绑定不再是使用:model=""的形式了，而是和React tsx编写一样的数据绑定方式 model={dataModel} 这一点有些刚写的会有些不适应我们需要注意。

解决了基本框架之后我们需要解决参数使用问题，也就是如何定义props。

export interface EditorButtonConfig  {
    // 传入参数
}

interface Props {
    editorConfig: EditorButtonConfig;
}
// props中的使用
props: {
        editorConfig: {
            type: Object as PropType,
            default: null
        }
},
// setup 透传
setup(props) {}

简单的使用就像上述代码一样即可。

接下来就是完整形态的组件demo

import {defineComponent, onMounted, PropType, ref} from 'vue';

export interface EditorButtonConfig  {
    // 传入参数
}

interface Props {
    editorConfig: EditorButtonConfig;
}

/**
 * 表格解析组件，可以根据传入参数动态渲染表格大小
 */
export const TableEditor = defineComponent({
    name: 'TableEditor',
    props: {
        editorConfig: {
            type: Object as PropType,
            default: null
        }
    },
    setup(props) {

        return () => (
            <>
                
            
        )
    }
})

就这样一个简单的TSX的Vue组件就搭建完成，接下来就可以往里面扩展能力了，是不是比Vue文件的组件方式简单明了。

使用TSX编写自己的Vue3组件

组件三要素

编写组件