匿名插槽、具名插槽、作用域插槽的理解

插槽

匿名插槽：

子组件：
<button>
           <slot>Submit</slot>   
</button>
父组件：
 <Button>朴</Button>   //父组件传值到子组件插槽 按钮文字为朴  如果没传按钮文字默认为Submit

具名插槽：

子组件：
<slot name="header"></slot>     //子组件定义一个name
父组件：
<template v-slot:header>       //父组件中会向子组件中具名传递对应的模板内容
        <h1>你好</h1>
</template>      //用template包裹

v-slot可以简写为#
<template #header>   
        <h1>你好</h1>
</template> 

作用域插槽：

子组件：
单个插槽：
      <slot :user="user1">  </slot>  //绑定一个对象
绑定data里user的内容
data() {
    return {
      user1: {
        firstName: "gerace",
        lastName: "haLi",
      },
 hobby: {
        fruit: "apple",
        color: "blue"
      }
    };
  },
父组件：
<template #user="slotProps">  //父组件可以调用子组件的对象 slotProps可以自己定义名字
        {{ slotProps.user1.firstName }}     
      </template>
多个插槽：
子组件
<slot :userData="user" name="header">
        {{ user.msg }}
    </slot>
<slot :hobbyData="hobby" name="footer">
        {{ hobby.fruit }}
    </slot>
父组件：
<template v-slot:header="slotProps">
        {{ slotProps.userData.firstName }}
      </template>
<template v-slot:footer="slotProps">
        {{ slotProps.hobbyData.fruit }}
      </template>
可以用结构简写为：
<template #header="{userData}">
        {{ userData.firstName }}
      </template>
<template #footer="{hobbyData}">
        {{ hobbyData.fruit }}
      </template>