2019-02-14 vue组件基础篇4

slot用法

• 单个slot

<div id="app">
        <child-component>
            <p>分发的内容</p>
            <p>更多分发的内容</p>
        </child-component>
</div>
<script>
        Vue.component('child-component', {
            template: '<div><slot><p>如果父组件没有插入内容，我将作为默认出现</p></slot></div>'
        })
</script>

• 具名slot

<div id="app">
        <child-component>
            <h2 slot="header">标题</h2>
            <p>正文内容</p>
            <p>更多的正文内容</p>
            <div slot="footer">底部信息</div>
        </child-component>
    </div>
    <script>
        Vue.component('child-component', {
            template: '\
            <div class="container"> \
                <div class="header"> \
                    <slot name="header"></slot> \
                </div> \
                <div class="main"> \
                    <slot></slot> \
                </div> \
                <div class="footer"> \
                    <slot name="footer"></slot> \
                </div> \
            </div>'
        })
    </script>

• 作用域插槽

父组件中使用了<template>元素，而且拥有一个scope="props"的特性，这里的props只是一个临时变量，就像v-for="item in items"里面的item一样。template内可以通过临时变量props访问来自子组件插槽的数据msg。

<div id="app">
        <ping>
            <template scope="props">
                <p>来自父组件的内容</p>
                <p>{{ props.msg }}</p>
            </template>
        </ping>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
        Vue.component('ping', {
            template: '<div><slot msg="这是子组件的内容"></slot></div>',
        })

        var app = new Vue({
            el: '#app',
        })
</script>