vue.js实战 第一篇 第七章 组件详解_slot分发内容

单个slot

<div id="app">
    <mc>
        <p>text</p>
    </mc>
</div>
<script>
    Vue.component('mc',{
        template:'\
        <div>\
            <slot>\
                <p>text1</p>\
            </slot>\
        </div>'
    });
</script>

具名slot

<div id="app">
    <mc>
        <h2 slot="header">title</h2>
        <p>content</p>
    </mc>
</div>
<script>
    Vue.component('mc',{
        template:'\
        <div class="container">\
            <div class="header">\
                <slot name="header"></slot>\
            </div>\
            <div class="main">\
                <slot></slot>\
            </div>\
        <div>'
    });
</script>

作用域插槽

<div id="app">
    <mc>
        <template scope="props">
            <p>来自父组件</p>
            <p>{{props.msg}}</p>
        </template>
    </mc>
</div>
<script>
    Vue.component('mc',{
        template:'\
        <div class="container">\
            <slot msg="来自子组件"></slot>\
        </div>'
    })
</script>

渲染后的结果

<div id="app">
    <div class="container">
        <p>来自父组件</p>
        <p>来自子组件</p>
    </div>
</div>

在列表组件使用

<div id="app">
    <my-list :books="books">
        <template slot="book" scope="props">
            <li>{{props.bookName}}</li>
        </template>
    </my-list>
</div>
<script>
    Vue.component('my-list',{
        props:{
            books:{
                type:Array,
                default:function(){
                    return [];
                }
            }
        },
        template:'\
        <ul>\
            <slot name="book" v-for="book in books" :book-name="book.name">\
            </slot>\
        </ul>'
    });
    var app=new Vue({
        el:'#app',
        data:{
            books:[
                {name:'js'},
                {name:'html'},
                {name:'css'}
            ]
        }
    })
</script>

访问slot

$slots可以访问某个具名slot，this.$slots.default包括了所有没有被包含在具名slot中的节点。