1//navigation-link组件
 2//插槽内可以包含任何模板代码
 3//<slot></slot> 将会被替换为1.1中的 <span class="fa fa-user"></span> Your Profile
 4<a
 5  v-bind:href="url"
 6  class="nav-link"
 7>
 8  <slot></slot>
 9</a>
10

1//Submit只会在没有提供内容的时候被渲染
2<button type="submit">
3  <slot>Submit</slot>
4</button>

 1//一个不带 name 的 <slot> 出口会带有隐含的名字“default”
 2<div class="container">
 3  <header>
 4    <slot name="header"></slot>
 5  </header>
 6  <main>
 7    <slot></slot>
 8  </main>
 9  <footer>
10    <slot name="footer"></slot>
11  </footer>
12</div>

1<span>
2  <slot v-bind:user="user">
3    {{ user.lastName }}//默认
4  </slot>
5</span>

1//1.1
2
3<navigation-link url="/profile">
4  <!-- 添加一个 Font Awesome 图标 -->
5  <span class="fa fa-user"></span>
6  Your Profile
7</navigation-link>
8

 1//<template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容
 2<base-layout>
 3  <template v-slot:header>
 4    <h1>Here might be a page title</h1>
 5  </template>
 6
 7  <template v-slot:default>
 8    <p>A paragraph for the main content.</p>
 9    <p>And another one.</p>
10  </template>
11
12  <template v-slot:footer>
13    <p>Here's some contact info</p>
14  </template>
15</base-layout>

1<current-user>
2  <template v-slot:default="slotProps">
3    {{ slotProps.user.firstName }}
4  </template>
5</current-user>

1参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header