vue2+jsx与vue3+jsx插槽的写法

1.vue2 + jsx

(1)slot组件
<template>
  <div class="index">
    <h2>slotdemo -- 组件调用成功</h2>
    <slot name="title"></slot>
    <slot></slot>
  </div>
</template>
（2）调用
<script lang="tsx">
import slotdemo from './slot/index.vue';
export default {
  components: { slotdemo },
  data() {
    return {
      title: 'index',
    };
  },
  render() {
    return (
      <>
        <div>
          <h1>vue2-jsxSlot</h1>
          <slotdemo>
            {{
              title: () => {
                return <h1>vue2中slot的使用</h1>;
              },
              default: () => <h2>天气还行</h2>,
            }}
          </slotdemo>
        </div>
      </>
    );
  },
};
</script>

2.vue3 + jsx

(1)slot组件
<script lang="tsx">
import { defineComponent } from 'vue';
export default defineComponent({
  setup(props, { slots }) {
    // 方式一
    const resSlots = slots;
    return { resSlots };
  },
  render() {
    return (
      <>
        <div className="index">
          <h2>vue3-slotdemo-组件调用成功</h2>
          {/* 方式一 */}
          <h3>方式一</h3>
          <div>{this.resSlots?.title()}</div>
          <div>{this.resSlots?.default()}</div>

          {/* 方式二 */}
          <h3>方式二</h3>
          <div>{this.$slots?.title()}</div>
          <div>{this.$slots?.default()}</div>
        </div>
     </>
    );
  },
});
</script>
（2）调用
<script lang="tsx">
import { defineComponent } from 'vue';
import slotdemo from './slot/index.vue';
export default defineComponent({
  components: { slotdemo },
  setup() {
    return {};
  },
  render() {
    return (
      <>
        <div className="index">
          <h1>vue3-jsxSlot</h1>
          <slotdemo>
            {{
              title: () => <h3>vue3中slot的使用</h3>,
              default: () => <p>2023/04/13</p>,
            }}
          </slotdemo>
        </div>
      </>
    );
  },
});
</script>