元件模板-元素可以用一個特殊的屬性 name 來配置如何分發內容。多個 slot 可以有不同的名字。具名 slot 將匹配內容片段中有對應 slot 特性的元素

<style media="screen">
    .panel{
      margin:10px;width:150px;
      border:1px solid #ccc
    }
    .panel-header,.panel-bottom{
      height: 20px;
      background-color:antiquewhite;
    }
    .panel-body{
      min-height: 50px;
    }
  </style>

<div class="app">
    <!--多個slot分發內容 v-for遍歷-->
     <panel2 v-for="item in list">
       <h2 slot="title">{{item.title}}</h2>
       <p slot="desc">{{item.desc}}</p>
       <span slot="tims">{{item.tims}}</span>
     </panel2>
  </div>
 

<!--元件模板-->
<script type="text/x-Template" id="panelTpl">
   <div class="panel">
       <div class="panel-header"><slot name="title"></slot></div>
       <div class="panel-body">
         <slot name="desc"></slot>
       </div>
       <div class="panel-bottom"><slot name="tims"></slot></div>
   </div>
</script>
 

<script type="text/javascript">
var panelTpl={
  template:'#panelTpl'
}
var vm=new Vue({
  el:'.app',
  components:{//註冊元件
    "panel2":panelTpl
  },
  data:{
    list:[
      {title:'新聞一標題',desc:'一的描述',tims:'2018-07-19'},
      {title:'新聞二標題',desc:'二的描述',tims:'2018-07-18'},
      {title:'新聞三標題',desc:'三的描述',tims:'2018-07-17'}
    ]
  }

});
</script>