怎么使用Vue中的插槽？

<template>
<div>
  <h1>
    <slot name="website"></slot>
  </h1>
  <p>
    <slot name="title"></slot>
  </p>
</div>
</template>

 <ToDay02 >
      <template v-slot:title>
        <span >一个文本标签</span>
      </template>
     <template v-slot:website>
       <span >baidu.com</span>
     </template>
 </ToDay02>

以上是vue3的写法--具名插槽

 作用域插槽

<ToDay02 >
      <template v-slot="{ list }">
        <div v-for="(i ,index) in list" :key="index" >{{i}}</div>
      </template>
</ToDay02>

//组件

<template>
<div>
  <slot :list="list"></slot>
</div>
</template>

<script>
export default {
  data(){
    return {
      list:['苹果','香蕉','橙子','柠檬']
    }
  }
}
</script>