Vue——slot插槽 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Vue中的插槽（slot）</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <child>
                <p>Harold</p>
            </child>

            <body-content>
                <div class="header" slot='header'>header</div>
                <div class="footer" slot='footer'>footer</div>
            </body-content>
        </div>
        <script type="text/javascript">
            Vue.component('child', {
                template: `<div>
                                        <p>hello</p>
                                        <slot>默认内容</solt>
                                    </div>`
            })

            Vue.component('body-content', {
                template: `<div>
                                        <slot name='header'></slot>
                                        <div class='content'>content</div>
                                        <slot name='footer'></slot>
                                    </div>`
            })

            var vm = new Vue({
                el: '#root'
            })
        </script>
    </body>

</html>

 

 

作用域插槽

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Vue中的作用域插槽</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <child>
                <template slot-scope="props1">
                    <li>{{props1.item1}}</li>
                </template>
            </child>
        </div>
        <script type="text/javascript">
            Vue.component('child', {
                data() {
                    return {
                        list: [1, 2, 3, 4]
                    }
                },
                template: `<div>
                                        <ul>
                                            <slot v-for='item of list' :item1=item></slot>
                                        </ui>
                                    </div>`
            })
            var vm = new Vue({
                el: '#root'
            })
        </script>
    </body>

</html>

 

posted @ 2019-10-28 17:59  嘆世殘者——華帥  阅读(122)  评论(0)  编辑  收藏  举报