插槽slot

普通插槽

定义插槽

带name属性的为具名插槽，不带name属性的是默认插槽（会带有隐含的名字default）

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

填充插槽内容

具名内容必须在template元素内定义，通过v-slot绑定，

<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-bind，把数据作为slot插槽的一个属性绑定，称为插槽 prop

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

访问子组件属性

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

解构插槽props

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

具名插槽简写

#号后面必须跟插槽name

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>