vue插槽slot

一、什么是插槽slot

简单来说，就是父子组件间用来渲染对方的内容的。比如，写在子组件开始结束标签之间的内容，除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。

原因:父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

二、单个插槽

当子组件模板只有一个没有属性的插槽的时候，父组件传入的整个内容片段将插入到插槽所在的DOM位置，并替换掉插槽本身。最初在子组件<slot>标签中的任何内容都被视为备用内容，只有在宿主元素为空，且没有要插入的内容时才会显示。

<div>//子组件模板
  <h2>我是子组件的标题</h2>
  <slot>    //没有属性，标签间的内容作为备用
    只有在没有要分发的内容时才会显示。
  </slot>
</div>

<div>//父组件模板
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>

<div>//渲染结果
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>       //替换了子组件slot的备用内容
    <p>这是更多的初始内容</p>	//替换了子组件slot的备用内容
  </div>
</div>

三、具名插槽

当有多个插槽，且需要配置分发父组件的内容时，就需要具名插槽：给slot一个特殊的name属性，父组件在使用子组件时，指定slot="name"就可以分发到指定区域。拥有具名插槽的子组件依然可以有一个无属性的备用插槽。z

<div class="container">    //名为app-layout的子组件模板
  <header>
    <slot name="header"></slot>	//具名插槽header
  </header>
  <main>
    <slot></slot>	//备用插槽
  </main>
  <footer>
    <slot name="footer"></slot>	//具名插槽footer
  </footer>
</div>

<app-layout>	//父组件模板
  <h1 slot="header">这里可能是一个页面标题</h1>	//分发到子组件的header插槽

  <p>主要内容的一个段落。</p>	//分发到备用插槽
  <p>另一个主要段落。</p>	//分发到备用插槽

  <p slot="footer">这里有一些联系信息</p>	//分发到子组件的footer插槽
</app-layout>

<div class="container">	//渲染结果
  <header>
    <h1>这里可能是一个页面标题</h1>
  </header>
  <main>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
  </main>
  <footer>
    <p>这里有一些联系信息</p>
  </footer>
</div>

四、作用域插槽

前面的插槽都是向下分发内容，即由父组件传递给子组件，作用域插槽则是向上传递数据，由子组件传递给父组件。

在子组件中，只需讲数据传递给插槽。

<div class="child">
  <slot text="hello from child"></slot>
</div>

在父组件中，具有特殊特性 slot-scope 的 <template> 元素必须存在, slot-scope接收从子组件传递过来的prop对象。

<div class="parent">
  <child>
    <template slot-scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

渲染结果：

<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>

在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于 <template>。

举例：作用域插槽使用在列表组件中，下面是官方demo

<my-awesome-list :items="items">	//父组件
  <!-- 作用域插槽也可以是具名的 -->
  <li
    slot="item"
    slot-scope="props"	//接收子组件返回的属性
    class="my-fancy-item">	//为分发内容添加样式
    {{ props.text }}	//渲染内容
  </li>
</my-awesome-list>

<ul>	//子组件
  <slot name="item"	//指定插槽名
    v-for="item in items"	//循环输出子项
    :text="item.text">	//创建一个新的属性， 返回给父组件
    <!-- 这里写入备用内容 -->	
  </slot>
</ul>

可以看到，上述例子讲父组件的li分发到子组件的插槽位置，由父组件向下传递给子组件的数据是items，是通过子组件的props传递。

同时使用slot-scope接收子组件返回的属性——用以定制渲染的内容。这一步是在父组件实现，而不是子组件预先定义好，这就大大降低了组件的耦合。