vue 插槽

v-slot

具名插槽

子组件:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件：

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

 <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

v-slot只能在组件或 template标签上使用

具名插槽的缩写
缩写为#。例如v-slot:header能够被重写为#header
默认插槽
没有name，默认为default

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

默认插槽的缩写语法 不能和具名插槽混用

动态插槽名

<base-layout>  
    <template v-slot:[dynamicSlotName]> ... </template>  
</base-layout>

做用域插槽

子组件：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

父组件：

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

$slots

用来访问被插槽分发的内容。每一个具名插槽 有其相应的属性 (例如：v-slot:foo中的内容将会在 vm.$slots.foo 中被找到)