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">  <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>

热门工具换一换

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