vue+tsx+slot

组件接受默认的数据以及一个title

import { defineComponent } from "vue";

export default defineComponent({
  name: "children",
  setup(props, { emit, slots }) {
    return () => {
      return <div class="children">
        {slots.default ? slots.default() : null}
        {slots.title ? slots.title() : null}
        <div class="add-btn">add-btn</div>
      </div>
    }
  }
})

调用,组件包裹的形式显示默认的插槽

import Children from './chidren.tsx';

setup(props, { emit, slots }) {
  return () => {
      return <div class="parent">
        <Children >
			default
         </Children >
      </div>
  }
}

浏览器渲染:

调用, v-slots传入default和title对象

setup(props, { emit, slots }) {
	function DefaultRender() {
      return 'default'
    }
    function TitleRender() {
      return 'title'
    }

  return () => {
      return <div class="parent">
        <Children  v-slots={{
          default: DefaultRender,
          title: TitleRender
         }}/> 
      </div>
  }
}

浏览器渲染: