Components Slots
文章目录

VueJS: Components-slots

其实这个就有点像是将 children 调用并输出

比如像这样合成组件:

1
2
3
<navigation-link url="/profile">
  Your Profile
</navigation-link>

以头尾标签之间的这段内容 ‘Your Profile’ 会被 <slot>

1
2
3
4
5
6
<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

当组件渲染的时候,<slot></slot> 将会被替换为 “Your Profile”。插槽内可以包含任何模板代码,包括 HTML 甚至其他组件:

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

如果 <navigation-link> 没有包含一个 <slot> 元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃。