vue3学习（十）插槽slot

slot 是 Web 组件内的一个占位符，是子组件中的提供给父组件使用的一个占位符，

用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

匿名插槽

子组件Content.vue ------ 在子组件中用<slot></slot>标签占位

 <main class="main">
     <div>
         <slot></slot>
     </div>
</main>

父组件中

<template>

    <Content class="content">
       <template v-slot>
          <div>
             这是插入主体框中的内容
          </div>
       </template>
    </Content>

</template>

import Content from './Content/Content.vue'

具名插槽

name插槽的名字。拥有 name 属性的插槽叫具名插槽

<main class="main">
    <div>
        <slot name="main"></slot>
    </div>
</main>

父组件通过   v-slot="插槽的名字"    或者简写为 #插槽名

<template>

    <Content class="content">
       <template v-slot='main'>
          <div>
             这是插入主体框中的内容
          </div>
       </template>
    </Content>

</template>

import Content from './Content/Content.vue'

作用域插槽

在子组件动态绑定参数 派发给父组件的slot去使用

    <div>
        <div v-for="item in 100">
            <slot :data="item"></slot>
        </div>
    </div>

父组件解构取值

<Content>
  <template v-slot="{ data }">
     <div>{{ data }}</div>
  </template>
</Content>

动态插槽

插槽名可以是一个变量名

<Content>
    <template #[name]>
        <div>
            我在哪？？？
        </div>
    </template>
</Content>

let name = ref('where')

可以通过修改变量name的值，动态决定插入内容的位置