返回列表 发帖

Vue 3.0 插槽内容

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

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

<todo-button>
  Add todo
</todo-button>
然后在 <todo-button> 的模板中,你可能有:

<!-- todo-button 组件模板 -->
<button class="btn-primary">
  <slot></slot>
</button>
当组件渲染的时候,将会被替换为“Add Todo”。

<!-- 渲染 HTML -->
<button class="btn-primary">
  Add todo
</button>
不过,字符串只是开始!插槽还可以包含任何模板代码,包括 HTML:

<todo-button>
  <!-- 添加一个Font Awesome 图标 -->
  <i class="fas fa-plus"></i>
  Add todo
</todo-button>
或其他组件

<todo-button>
    <!-- 添加一个图标的组件 -->
  <font-awesome-icon name="plus"></font-awesome-icon>
  Add todo
</todo-button>
如果 <todo-button> 的 template 中没有包含一个 <slot> 元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃

<!-- todo-button 组件模板 -->
<button class="btn-primary">
  Create a new item
</button>
<todo-button>
  <!-- 以下文本不会渲染 -->
  Add todo
</todo-button>

返回列表