插槽基础

插槽:为物体特意预留的空间，待需时使用该空间

在组件模板中可以使用<slot>创建插槽，当需要在不同场景扩展该组件时使用的技术。

1.插槽的分类

1. 匿名插槽

   使用特点：所有扩展添加的新元素按照顺序加载到插槽之中

   缺点：无法将插槽内容独立 => 无法将独立的内容自定义摆放

2. 具名插槽

   对<slot name=''>指定name ;

   在扩展时必须以Template包裹并且指定v-slot:'name'插哪个槽。(v-slot简写#） 不指定name使表示插入匿名插槽

#components a 
<template>
  <div class="hello">
    <h1>HelloWorld</h1>
    //组件模板预留插槽
    <slot></slot>
    <slot name="head"></slot>
    <slot name="body"></slot>
    <slot name="foot"></slot>
    // :key='value'传递一个值
    <slot name="game" :game="gameName"></slot>
  </div>
</template>

# 引用hello组件页面
    <hellow>
      <p>没有指定插槽名的元素，被插入到匿名插槽中</p>
      <template #head>
        <h1>具名插槽的头部</h1>
      </template>
      <template #body>
        <h1>具名插槽的身体</h1>
      </template>
      <template v-slot:foot>
        <h1>具名插槽的底部</h1>
      </template>
      <template #game="gameobj">
        <p>{{gameobj.game}}</p>
      </template>
    </hellow>

2.作用域插槽

前提：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

使用场景： 父页面使用一个组件，想为该组件扩展内容其内容引用子模板的数据，由于无法获取子模版作用域数据引出作用域插槽。

做法： 1.如果有多个给slot插槽，则分别绑定属性<slot name:'name' :key='value'> 在扩展内容的template上设置proprs名称

 <template #game="gameobj">
        <p>{{gameobj.game}}</p>
 </template>

2.如果只有一个匿名插槽的简写方式

在slot绑定属性，在组件上绑定props名称

<current-user v-slot:default="slotProps"> 
    {{ slotProps.user.firstName }} 
</current-user>