vue中的具名插槽

    <div id="app">
      <!-- 1.2 想要指定插入指定位置，就得指定一下插入到slot的名字，通过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上 -->
      <index>
        <h1 slot="header">我爱学习前端</h1>
        <p slot="footer">前端的乐趣无穷无尽</p>
      </index>
    </div>
    <script>
      // 1.1. 通过给slot添加name属性，来指定当前slot的名字
      Vue.component('index', {
        template: `
          <div>
            <slot name="header"></slot>
            index
            <slot name="footer"></slot>
          </div>
        `
      })
      var vm = new Vue({
        el: '#app',
        data: {

        }
      })
    </script>

显示结果