vue-cli 工程中 具名 插槽 slot用法

参考vue2.0文档
具体解释参考文档

简单理解就是 给每一个 slot 一个name属性，
    父组件中 使用子组件标签时用的slot=“xxx”,
    要跟子组件的name匹配上，才会渲染出来

具名插槽和单个插槽可以共存

具名插槽代码实例:

在父组件中 我现在在 app.vue中

<template>
  <div id="app">
    <!-- 使用组件 -->
    <three>
      <h2 slot="header">标题</h2>
      <p  slot="main">正文内容</p>
      <!-- 这个不会渲染出来的 -->
      <p>正文内容</p>
      <div slot="footer">底部信息</div>
    </three>
  </div>
</template>
<script>

import three from './components/three'

export default {
  components:{
    three
  }
}
</script>

子组件three.vue

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