Vue 具名插槽

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <title>Document</title>
 </head>
 <body>
 <div id="wd" class="">
     
     <div id="exp1">
         <parent-com></parent-com>
     </div>
     <script type="text/javascript">
      //子组件
     Vue.component('app-layout',{
          template:'' +
         '<div class="container">' +
         '   <header>' +
          '       <slot name="header"></slot>' +
          '   </header>' +
          '   <main>' +
         '       <slot></slot>' +
         '   </main>' +
         '   <footer>' +
        '       <slot name="footer"></slot>' +
         '   </footer>' +
         '</div>'
    });
     //父组件
     //这个组件里的插槽的顺不会因为插入的顺序的改变而改变
     //如果是slot 多个的话 那么都会添加进去 如果slot的名字没找到 那么就会被舍弃不渲染

     Vue.component('parent-com',{
         template:'' +
        '<app-layout>' +
         '   <p>主要内容的一个段落</p>' +
         '   <p>主要内容的另外一个段落</p>' +
         '   <p slot="footer">这是一些页脚信息</p>' +
         '   <h1 slot="header">这是一个页面的标题</h1>' +
         '   <h1 slot="header">这是一个页面的标题COPY</h1>' +
         '   <h1 slot="header1">这是一个页面的标题COPYDOUBLE</h1>' +
         '</app-layout>'
    });
     var exp1 = new Vue({
         el:'#exp1'
    })
 </script>
 </body>
</html>