sot

一 什么是slot

slot可以将html从父组件传入子组件。

二 单个插槽(默认插槽，匿名插槽)

单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一个该类插槽。
假定 my-component 组件有如下模板:

<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>    <p>这是更多的初始内容</p>  </div></div>

三 具名插槽

可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。
仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。
假定 app-layout 组件有如下模板:

<div class="container">  <header>    <slot name="header"></slot>  </header>  <main>    <slot></slot>  </main>  <footer>    <slot name="footer"></slot>  </footer></div>

父组件模板:

<app-layout>  <h1 slot="header">这里可能是一个页面标题</h1>  <p>主要内容的一个段落。</p>  <p>另一个主要段落。</p>  <p slot="footer">这里有一些联系信息</p></app-layout>

渲染结果:

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

四 作用域插槽

作用域插槽就是 “带数据的插槽”，插槽作用域则是子组件给父组件提供数据，父组件提供样式。
下面的例子，你就能看到，父组件提供了三种样式(分别是flex、ul、直接显示)，都没有提供数据，数据使用的都是子组件插槽自己绑定的那个数组（一堆人名的那个数组）:

<template>  <div class="father">    <h3>这里是父组件</h3>    <!--第一次使用：用flex展示数据-->    <child>      <template slot-scope="user">        <div class="tmpl">          <span v-for="item in user.data">{{item}}</span>        </div>      </template>    </child>    <!--第二次使用：用列表展示数据-->    <child>      <template slot-scope="user">        <ul>          <li v-for="item in user.data">{{item}}</li>        </ul>      </template>    </child>    <!--第三次使用：直接显示数据-->    <child>      <template slot-scope="user">       {{user.data}}      </template>    </child>    <!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->    <child>      我就是模板    </child>  </div></template>

子组件：

<template>  <div class="child">    <h3>这里是子组件</h3>    // 作用域插槽    <slot  :data="data"></slot>  </div></template> export default {    data: function(){      return {        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']      }    }}

输出:

来源：http://www.icode9.com/content-4-240251.html