vue 的slot分發內容 (多個分發)
阿新 • • 發佈:2019-02-07
元件模板-元素可以用一個特殊的屬性 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>