Vue3中，使用TSX/JSX编写的父组件，如何向子组件中传递具名插槽(slot)的内容

子组件（Child） - 模板代码：

<template>
  <div class="child-component">
    <div class="header-box">
      <slot name="header"></slot>
    </div>
    <slot></slot>
  </div>
</template>

该子组件中可以接收一个header模块的插槽内容(1)和默认的插槽内容(2)

 

* 如果我们想在一个使用TSX语法编写的父组件中向Child组件填充插槽内容 可以参考一下两种方式：

父组件 - 实例代码（TSX）- 方式1

import Child from './Child.vue'

export const F = defineComponent({
  name: 'F',
  setup(props, ctx) {
    return () => {
      return <div class="parent-component-wrapper">
        <Child>
          {{
            header: () => <div>header slot content</div>,
            default: () => <div>default children content</div>,
          }}
        </Child>
      </div>
    };
  },
});

 

父组件 - 实例代码（TSX）- 方式2

import Child from './Child.vue'

export const F = defineComponent({
  name: 'F',
  setup(props, ctx) {
    return () => {
      return <div class="parent-component-wrapper">
        <Child
          v-slots={{
            header: () => <div>header slot content</div>,
            default: () => <div>default children content</div>,
          }}
        />
      </div>
    };
  },
});