vue3 slot插槽在tsx中的使用方法

在Vue 3中，你可以在组件中使用插槽（slots）来允许父组件传递内容。在TSX中，由于Vue 3支持使用JSX或TSX，你可以通过children属性来使用插槽。

以下是一个简单的例子：

父组件 (ParentComponent.tsx):

import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    return () => (
      <ChildComponent>
        {/* 这里的内容将会传递给子组件的默认插槽 */}
        <p>这是传递给子组件的内容</p>
      </ChildComponent>
    );
  }
});

子组件 (ChildComponent.vue):

<template>
  <div>
    <!-- 这里的slot就是父组件传递过来的内容 -->
    <slot></slot>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  // ...
});
</script>

在这个例子中，ParentComponent 使用 ChildComponent 并通过插槽插入了一段文本。ChildComponent 的模板中 <slot></slot> 表示这里可以插入父组件传递的内容。