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>'
});