2020-1-7 vue中插槽的学习笔记

2020-1-7 vue中插槽的学习笔记

参考官网地址：link.

具名插槽：

注意 v-slot 只能添加在 <template> 上

一、<slot>元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot> 
    // 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

二、在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
<template> 元素中的所有内容都将会被传入相应的插槽。

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

  <p>A paragraph for the main content.</p >
  <p>And another one.</p >

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

三、渲染如下：

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main> 
    <!--有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。-->
    <p>A paragraph for the main content.</p >
    <p>And another one.</p >
  </main>
  <footer>
    <p>Here's some contact info</p >
  </footer>
</div>