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>

顯示結果