具名插槽和匿名插槽

1.判断组件内部是否插入slot

具名插槽

<div v-if="$slots.footer" slot="footer">
      <slot name="footer"></slot>
 </div>

匿名插槽

<div v-if="$slots.default">
      <slot></slot>
</div>

2.slot组件传值

子组件

<template v-if="$slots.default">

            <slot :data="{

                title,

                day,

                hour,

                minute,

                second,

            }"/>

   </template>

父组件

<Countdown>

<template #default="{ data }">

{{data.title}}--{{data.day}}-{{data.hour}}-{{data.minute}}-{{data.second}}

<template>

</Countdown>