vue tsx slots传入方式

代码

• 子组件

import { defineComponent, PropType } from 'vue';

const MyComponent = defineComponent({
    name: 'MyComponent',
    props: {
        title: {
            type: String as PropType<string>,
            required: true
        }
    },
    setup(props, { slots }) {
        return () => (
            <div>
                <h1>{props.title}</h1>
                <div>
                    {/* 渲染名为 "header" 的插槽 */}
                    {slots.header ? slots.header() : <p>默认头部内容</p>}
                </div>
                <div>
                    {/* 渲染名为 "footer" 的插槽 */}
                    {slots.footer ? slots.footer() : <p>默认底部内容</p>}
                </div>
            </div>
        );
    }
});

export default MyComponent;

• 父组件传入方式

<script lang="tsx">
import { defineComponent } from 'vue';
import MyComponent from './components/childAbc';

const App = defineComponent({
  name: 'App',
  setup() {
    return () => (
      <div>
        <MyComponent title="欢迎" v-slots={{
          header: () => <h2>这是自定义头部内容</h2>,
          footer: () => <p>这是自定义底部内容</p>,
        }} />
      </div>
    );
  },
});

export default App;
</script>