vue 的slot分发内容 （多个分发）

 组件模板-元素可以用一个特殊的属性 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>