在Vue3中使用 tsx / jsx + 插槽 （element-plus中的tsx写法与插槽）

在Vue 3中，你可以使用Teleport来实现组件间的插槽通信，并且结合TSX/JSX来创建组件。以下是一个简单的例子：

首先，确保你已经安装了对应的依赖：

npm install @vue/babel-preset-jsx

然后，你可以创建一个父组件ParentComponent.tsx，它使用了ElButton组件，并定义了一个插槽：

// ParentComponent.tsx
import { defineComponent, ref } from 'vue';
import { ElButton } from 'element-plus';
 
export default defineComponent({
  name: 'ParentComponent',
 
  setup() {
    const content = ref('Hello from Parent');
 
    return () => (
      <div>
        <ElButton type="primary">
          {content.value}
        </ElButton>
        <slot-comp>
          {{ content }}
        </slot-comp>
      </div>
    );
  },
});

接下来，创建一个子组件SlotComponent.tsx，它会接收父组件通过插槽传递的内容：

// SlotComponent.tsx
import { defineComponent, PropType } from 'vue';
 
export default defineComponent({
  name: 'SlotComponent',
 
  props: {
    content: {
      type: Object as PropType<string>,
      required: true
    }
  },
 
  setup(props) {
    return () => (
      <div>
        {props.content} from SlotComponent
      </div>
    );
  },
});

最后，在你的主入口文件或者其他组件中使用这两个组件：

// App.tsx
import { defineComponent } from 'vue';
import ParentComponent from './ParentComponent.tsx';
import SlotComponent from './SlotComponent.tsx';
 
export default defineComponent({
  name: 'App',
 
  components: {
    ParentComponent,
    SlotComp: SlotComponent
  },
 
  setup() {
    return () => (
      <div>
        <ParentComponent />
      </div>
    );
  },
});

这样，你就可以在父组件中定义插槽内容，并在子组件中接收和显示这些内容。注意，插槽内容需要是可被序列化的，所以对于对象或者函数这样的数据，你需要根据实际情况进行处理。