组件插槽与作用域插槽

1、父组件向子组件传递内容

    <div id="app">
        <alert-box>警示框</alert-box>
        <alert-box>有一个警告</alert-box>
        <alert-box></alert-box> <!-- 没有内容 显示默认内容 -->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.component('alert-box', {
            template: `<div><slot>默认内容</slot></div>`
        })
        var vm = new Vue({
            el: '#app'
        })
    </script>

　　

2、具名插槽　　slot与template都是固定的，是Vue提供的API

    <div id="app">
        <item-one>
            <p slot="header">头部信息一</p>
            <p slot="header">头部信息二</p>
            <p>主体</p>
            <p slot="footer">底部信息一</p>
            <p slot="footer">底部信息二</p>
        </item-one>
        <div>-------------------------</div>
        <item-one>
            <template slot="header">
                <p>头部信息一</p>
                <p>头部信息二</p>
            </template>
            <p>主体</p>
            <p>主体</p>
            <template slot="footer">
                <p>底部信息一</p>
                <p>底部信息二</p>
            </template>
        </item-one>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.component('item-one', {
            template: `<div>
                        <header>
                            <slot name="header"></slot>
                        </header>
                        <main>
                            <slot></slot>
                        </main>
                        <footer>
                            <slot name="footer"></slot>
                        </footer>
                    </div>`
        })
        var vm = new Vue({
            el: '#app'
        })
    </script>

　　3、作用域插槽

    <div id="app">
        <item-one :list="list">
            <template slot-scope="slotProps">
                <strong v-if="slotProps.item.id==2" class="current">{{slotProps.item.uname}}</strong>
                <span v-else>{{slotProps.item.uname}}</span>
            </template>
        </item-one>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.component('item-one', {
            props: ['list'],
            template: `<div>
                        <ul>
                            <li :key="item.id" v-for="item in list">
                                <slot :item="item">{{item.uname}}</slot>
                            </li>
                        </ul>
                    </div>`
        })
        var vm = new Vue({
            el: '#app',
            data: {
                list: [{
                    id: '1',
                    uname: 'apple'
                },{
                    id: '2',
                    uname: 'banana'
                },{
                    id: '3',
                    uname: 'orange'
                }]
            }
        })
    </script>