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中的节点。