Slots Emit和Props穿透组件封装实现摸鱼加钟

<template>
	<div class="card-container">
		<div @click="handleClose" class="card-close">
			<!-- 先用X来代替 -->
			<span>X</span>
		</div>
		<div class="card-title">
			<slot name="title">
				<!-- 默认使用props作为title，有slot则优先slot -->
				{{props.title}}
			</slot>
		</div>
		<div class="card-content">
			<slot>
				<!-- content这里也是，一切都以slot优先 -->
				{{props.content}}
			</slot>
		</div>
		<div class="card-footer">
			<slot name="footer">
				<!-- footer这里也是，一切都以slot优先 -->
				{{props.footer}}
			</slot>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
interface ChildrenProps {
	title?: String
	handleClose?: Function
}
const props = defineProps<ChildrenProps>()
const emits = defineEmits(['close'])
// 响应点击事件
const handleClose = () => {
	// 这边演示方便，直接调props之后跟上emit调用
	props.handleClose && props.handleClose()
	emits('close')
}
</script>
...css部分略过

<template>
	<button @click="handleClick">
		<slot name="prefix"></slot>
		<slot>
			{{props.title}}
		</slot>
		<slot name="suffix"></slot>
	</button>
</template>
<script lang="ts" setup>
import { withDefaults, defineProps, defineEmits } from 'vue'
interface ButtonProps {
	title?: string,
	handleClick?: Function
}
const emits = defineEmits(['click'])
const props = withDefaults(defineProps<ButtonProps>(), {
	title: 'DONE'
})
const handleClick = () => {
	emits('click')
	props.handleClick && props.handleClick()
}
</script>

<template>
	<div class="procard-container">
		<PureCard>
			<template
                            v-for="(slotKey, slotIndex) in slots"
                            :key="slotIndex" v-slot:[slotKey]
                        >
				<slot :name="slotKey"></slot>
			</template>
		</PureCard>
	</div>
</template>
<script lang="ts" setup>
import { useSlots } from 'vue'
import PureCard from '../Card/Card.vue'
const slots = Object.keys(useSlots())
</script>

<template>
  <div>
    <ProCard>
        <template #title>
            <span>CardSlot标题</span>
        </template>
    </ProCard>
  </div>
</template>

// 首先还是取到所有Slots的key
const slots = Object.keys(useSlots())
// 定义一个buttonSlots，用来组装需要用到的Button组件的slots
const buttonSlots = ref<string[]>([])
// 定义一个cardSlots，用来组装需要用到的Card组件的slots
const cardSlots = ref<string[]>([])
// 找出各自组件需要的slot组装好push进去就可以在template中穿透到指定组件了
for (let slotIndex = 0; slotIndex < slots.length; slotIndex++) {
	const slotKey = slots[slotIndex];
	if (slotKey.indexOf('c-') > -1) {
		cardSlots.value.push(slotKey.slice(2, slotKey.length))
		continue
	}
	if (slotKey.indexOf('b-') > -1) {
		buttonSlots.value.push(slotKey.slice(2, slotKey.length))
	}
}

<template>
	<div class="procard-container">
		<PureCard
			@close="onEmitClose"
			:handleClose="handleClose"
		>
			<!-- 使用组装好的cardSlots -->
			<template
				v-for="(slotKey, slotIndex) in cardSlots"
				:key="slotIndex"
				v-slot:[slotKey]
			>
				<slot :name="`c-${slotKey}`">{{slotKey}}</slot>
			</template>
		</PureCard>
		<PureButton
			@click="onButtonClick"
			:handleClick="handleButtonClick"
		>
			<!-- 使用组装好的buttonSlots -->
			<template
				v-for="(slotKey, slotIndex) in buttonSlots"
				:key="slotIndex"
				v-slot:[slotKey]
			>
				<slot :name="`b-${slotKey}`">{{slotKey}}</slot>
			</template>
		</PureButton>
	</div>
</template>

<template>
  <div>
    <ProCard title="123">
        <template #c-title>
            <span>CardSlot标题</span>
        </template>
        <template #c-default>
            <span>CardSlot内容</span>
        </template>
        <template #c-footer>
            <span>CardSlot底部</span>
        </template>
        <template #b-default>
            按钮
        </template>
    </ProCard>
  </div>
</template>

// 获取到组件所有的attributes
const attrs = useAttrs()

<PureCard
        @close="onEmitClose"
        :handleClose="handleClose"
        v-bind="attrs"
>
        <!-- 使用组装好的cardSlots -->
        <template
                v-for="(slotKey, slotIndex) in cardSlots"
                :key="slotIndex"
                v-slot:[slotKey]
        >
                <slot :name="`c-${slotKey}`"></slot>
        </template>
</PureCard>

<script setup lang="ts">
import ProCard from './components/ProCard/ProCard.vue'
const handleClose = () => {
  console.log('parent handleClose')
}
const onClose = () => {
  console.log('parent onClose')
}
</script>
<template>
    <ProCard
      title="123"
      @close="onClose"
      :handleClose="handleClose"
    >
        <template #c-title>
            <span>CardSlot标题</span>
        </template>
        <template #c-default>
            <span>CardSlot内容</span>
        </template>
        <template #c-footer>
            <span>CardSlot底部</span>
        </template>
        <template #b-default>
            按钮
        </template>
    </ProCard>
</template>

interface ProCardProps {
	title: String
	cardProps: Object // 新增cardProps，用来转发外部传入用于card组件的props
        buttonProps: Object // 新增buttonProps，用来转发外部传入用于button组件的props
}
// 获取到组件所有的attributes
const attrs = useAttrs()
const props = defineProps<ProCardProps>()
// 在template中使用如下，注意替换Card组件和Button组件的v-bind为各自需要接收的props
<template>
	<div class="procard-container">
		<PureCard
			@close="onEmitClose"
			:handleClose="handleClose"
			v-bind="props.cardProps"
		>
			<!-- 使用组装好的cardSlots -->
			<template
				v-for="(slotKey, slotIndex) in cardSlots"
				:key="slotIndex"
				v-slot:[slotKey]
			>
				<slot :name="`c-${slotKey}`"></slot>
			</template>
		</PureCard>
		<PureButton
			@click="onButtonClick"
			:handleClick="handleButtonClick"
			v-bind="props.buttonProps"
		>
			<!-- 使用组装好的buttonSlots -->
			<template
				v-for="(slotKey, slotIndex) in buttonSlots"
				:key="slotIndex"
				v-slot:[slotKey]
			>
				<slot :name="`b-${slotKey}`"></slot>
			</template>
		</PureButton>
	</div>
</template>

<template>
  <div>
  <!-- 这边把之前的@close和:handleClose改写如下，从cardProps传入 -->
    <ProCard
      title="123"
      :cardProps="{
        onClose: onClose,
        handleClose: handleClose
      }"
    >
        <template #c-title>
            <span>CardSlot标题</span>
        </template>
        <template #c-default>
            <span>CardSlot内容</span>
        </template>
        <template #c-footer>
            <span>CardSlot底部</span>
        </template>
        <template #b-default>
            按钮
        </template>
    </ProCard>
  </div>
</template>