slot是什么?有什么作用?

23 阅读1分钟

slot(插槽)

Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口。

它允许你像这样合成组件:

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

然后你在navigation-link组件的模板中只需要这样写即可

<a  
  v-bind:href="url"  
  class="nav-link"  
>  
  <slot></slot>    // 这里是重点
</a>

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

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

甚至其它的组件:

<navigation-link url="/profile">  
  <!-- 添加一个图标的组件 -->  
  <font-awesome-icon name="user"></font-awesome-icon>  
  Your Profile  
</navigation-link>