vue插槽的應用

這段時間業務較多，忙於加班，無奈。不得感嘆加班多了，會影響程序員的學習激情。

爲了身體健康和可持續性學習，應該適當加班，工做作不完能夠延後幾天緩緩，身體出問題了就只能去醫院緩緩了。。。

這周學習了下vue的插槽（其實就是看了下文檔），插槽分爲三種，普通插槽，具名插槽，做用域插槽。

普通插槽，其實就是一個slot標籤。

假若有一個 navigator-link 的組件，組件的 template 以下

// navigator-link component
<a :href="url" class="ab" >
    <slot></slot>
</a>
複製代碼

那麼運用這個組件的時候

<navigator-link url="/profile">
    // 組件中slot元素的顯示內容，就是你在這裏填充的內容，能夠是文本、html或其它組件
    <span>1</span><strong>2</strong><em>3</em>
</navigator-link>
複製代碼

組件的最終生成代碼以下

<a href="/profile" class="ab" >
    <span>1</span><strong>2</strong><em>3</em>
</a>
複製代碼

具名插槽

具名插槽，顧名思義，就是給插槽起個具體的名字。

假若有一個 base-layout 的組件，組件的 template 以下

// base-layout
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
複製代碼

那麼調用這個組件時，能夠自定義 header 和 footer 的內容了

<base-layout>
  <h1 slot="header">Here might be a page title</h1>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <p slot="footer">Heres some contact info</p>
</base-layout>
複製代碼

組件的最終生成代碼以下

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Heres some contact info</p>
  </footer>
</div>
複製代碼

做用域插槽

尚未徹底瞭解。說不出個因此然。

代碼來源：vue官方文檔