Vue--插槽

插槽内容

Vue实现了一套内容分发的API，这套API基于当前的Web Component规范草案，将slot元素作为承载分发内容的出口。

它允许你这样合成组件：

<navigation-link url='/profile'>
    You Profile
</navigation-link>

然后你在navigation-link的模板中可能会写：

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

当组件渲染的时候，这个slot元素将会被替换为“Your Profile”。插槽内可以包含任何的末班，包括HTML：

<navigation-link url="/profile">
  <!-- 添加一个 Font Awesome 图标 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

甚至其它的组件：

<navigation-link