默认插槽

父组件

<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
          <form>这里是个form表单</form>
        </child>
    </div>
</template>

子组件

<template>
    <div class="child">
        <h3>这里是子组件</h3>
        <slot></slot>
    </div>
</template>

具名插槽

父组件

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <div class="tmpl" slot="footer">
        <footer>我会显示在子元素尾部</footer>
      </div>
    </child>
  </div>
</template>

子组件

<template>
  <div class="child">
    <h3>这里是子组件</h3>
    <slot name="footer"></slot>
  </div>
</template>

作用域插槽

父组件

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>
    </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']
      }
    }
}