vue3+tsx+element-plus封装组件总结

最近在做vue3+plan+tsx+element-plus的项目，tsx在我这里是用来做组件的，以往的开发方式是sfc，就是vue页面的写法

<template>
</template>
<script>
</script>
<style scoped="scoped" lang="scss">
</style>

自从vue3出来之后，舍弃了很多方式，比如支持tsx，额，不解释了，我也是差不多知道意思，更详情的问度娘，我这里讲的就是主要tsx开发的时候碰到的一些问题还有vue3开发的一点总结，后续还会继续补充

我的大部分tsx知识都是在 https://zhuanlan.zhihu.com/p/563203507这篇文章里面学到的，有兴趣的朋友可以去看看

1. • tsx支持element-plus里el-table自定义模板<template #default="scope"></template>

这个也是困扰了我很久，在百度上找不到的，可能现在受众少吧，我也是从别人的文章里的蛛丝马迹里面找出来的，实现方式如下

这是用sfc方式的写法

<el-table-column label="Date" width="180">
      <template #default="scope">
        //在这里实现自定义内容，参数是 scope，比如要自定义显示图片就可以<img :src="scope.row.image"/>
      </template>
</el-table-column>

用tsx方式的写法

<el-table-column v-slots={
   {
              default: (props: Record<'scope', string>) =>
               //在这里实现自定义内容，参数是props，比如要自定义显示图片就可以<img :src="props.row.image"/>
              }}
/>

解释：v-slots必须（我也不知道有没有其他办法，就是写在外面就不行)写在标签里面，然后用双花括号{ {}}写具体代码，

default 对应的就是 <template #default="scope"> 里的default

props对应的就是<template #default="scope">里的scope，是一个回调的数组

2. • 支持在<template #default="scope"></templat