一、前言

vue中可以使用插槽slot分发内容给子组件，slot可以避免html被转义（不需要使用v-html）。

二、具名插槽

插槽就是在slot标签中直接插入外部传递过来的内容

<div id="app">
    <post-article>
        <div slot="header">header</div>
        <div slot="footer">footer</div>
    </post-article>
</div>
<script>
Vue.component('post-article', {
    template: `<div>
                <slot name="header">default-header</slot>
                <div>content</div>
                <slot name="footer">default-footer</slot>
               </div>`
});
var app = new Vue({
    el: '#app',
    data: {
        count: 0
    }
});
</script>

上面代码渲染出header、content、footer三个div标签。

提示：如果没有<div slot="header">header</div>，那么渲染默认的default-header
补充：可以不使用slot和name特性给slot命名，这是普通插槽，只能有一个。

三、作用域插槽

当传递给slot的内容中数据不一定时，需要获取子组件的数据，这时使用作用域插槽，它可以获取子组件的数据。

<div id="app">
    <todo-list>
        <template slot-scope="props">
            <a href="#">{{ props.item.content }}</a>
        </template>
    </todo-list>
</div>
<script>
Vue.component('todo-list', {
    data: function(){
        return {
            items: [
                {id: 0, content: "do some sports"},
                {id: 1, content: "paint a picture"},
                {id: 2, content: "read a book"}
            ]
        };
    },
    template: `<ul>
                <li 
                    v-for = "item in items"
                    :key = "item.id"
                >
                    <slot :item="item">{{ item.content }}</slot>
                </li> 
               </ul>`
});
var app = new Vue({
    el: '#app',
    data: {
        count: 0
    }
});
</script>

上面代码<slot :item="item">传递item给slot-scope中的值props（可自定义），props变成{"item": ...}。

提示：可以使用解构赋值的方式slot-scope="{ item }"，这样只需要item.content就可以访问传递过来的值的content。