Vue:Slot

lastmod 2021-07-14created 2021-07-142 edits

Slot Content

Vue's content distribution API is inspired by the Web Components spec draft, which uses the <slot> element as an outlet for distributed content.

WARNING
(Translator's note: Web Components is a concept first proposed in 2011 and mainly pushed by Google. Had a standard been finalized, it would have become the lightest and most universal web framework, but browser vendors have not yet arrived at a standard. Instead, many concepts that came out of the discussion have been adopted and used in web frameworks such as React, Angular, and Vue.)

So you can create a component like the one below.

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

And you can write the <navigation-link> template like this.

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

When the component renders, <slot></slot> is replaced with “Your Profile”. This is because slots can contain template code such as HTML.

<navigation-link url="/profile">
  <!-- Font Awesome 아이콘을 추가합시다 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

Other components (translator's note: <font-awesome-icon>) also work.

<navigation-link url="/profile">
  <!-- 컴포넌트로 아이콘을 추가해봅시다 -->
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</navigation-link>

If the <navigation-link> template does not contain a <slot> element, any content that should have gone there will be discarded.

author Zer0 sitemap