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>