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官方文档