vue裏面的slot

內容的分發<slot>，相當於angular裏面的transclusion,<slot> 元素可以用一個特殊的屬性 name 來配置如何分發內容。多個 slot 可以有不同的名字。具名 slot 將匹配內容片段中有對應 slot 特性的元素。

ue.component('my-mail',{
   template:"<div><h2>我是標題</h2><slot></slot></div>"//放入slot標籤，就可以在

自定義組件my-mail裏面進行添加元素等操作了
});

內容分發：通過在註冊組件的時候寫上slot的name屬性，可以在html標籤裏面通過slot的屬性名來相應的匹配到註冊時的元素標籤裏面，進行操作

<divid="vm">
     <app-layout>
         <h1slot="header">這裏可能是一個頁面標題</h1>
         <div>我是主要區域</div>
         <p slot="footer">XXX這裏有一些聯繫信息</p>
     </app-layout>
 </div>
</body>
</html>
<scriptsrc="vue.js"></script>
<script>
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>"
});

渲染結果

<div id="vm">
    <div class="container">
        <header>
            <h1>這裏可能是一個標題</h1>
        </header>
    </div>
    <main>
        <div>我是主要區域</div>
        <div>
            <h4>
                xxx這裏有一些聯繫信息
            </h4>
        </div>
    </main>
    <footer></footer>
</div>

作用域插槽

可以通過帶有scope屬性的template標籤獲得

Html裏面的代碼：

  <app-layout>
    <template scope="props">
        <span>{{ props.text }}</span>
    </template>
</app-layout>

註冊組件代碼：

Vue.component('app-layout',{
    template:'<div class="child">'+
    '<slot text="doyoulove..."></slot>'+
       ' </div>'
});