tsx 实现slot插槽

tsx 实现slot插槽

• 父组件

<template>
    <div class="component-name">
        <child>
            <template #default="scope">
                <div>default</div>
                <div>{{ scope.a }}</div>
            </template>
            <template #myself>
                <div>sdfsdfsf</div>
            </template>
        </child>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import child from './components/child';
</script>

<style lang="scss" scoped></style>

• 子组件

import { defineComponent, PropType, h, computed, ref, watch } from 'vue';
import type { Reactive, Ref } from 'vue';
import styles from '../scss/child.module.scss';
import '../scss/child.scss'; //这引入的样式是全局的，会影响其他页面其他组件

export default defineComponent({
    setup(props, { slots }) {
        console.log(slots, 'slots');
        return () => {
            return (
                <>
                    {/* slots 直接访问模板函数，并且可以传入scope变量作用给模板 */}
                    <div class={styles.child}>{slots.default?.({ a: '23234' })}</div>
                    <div class={styles.child}>{slots.myself?.()}</div>
                </>
            );
        };
    }
});