Vue 具名插槽

具名插槽

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('mySlot', {
                template: `
                    <li>
                        预留的第一个坑
                        <slot name = 'two'></slot>
                        预留的第二个坑
                        <slot name = 'one'></slot>
                    </li>
                `
            });

            var App = {
                template: `
                    <div>
                        <ul>
                            <mySlot>
                                <h2 slot = 'one'>我是第一个坑</h2>
                                <h3 slot = 'two'>我是第二个坑</h3>
                            </mySlot>
                        </ul>
                    </div>
                `
            }

            new Vue({
                el: '#app',
                components: {
                    App
                },
                template: '<App />'
            });
        </script>
    </body>
</html>

 

posted @ 2019-06-03 18:13  认真对待世界的小白  阅读(457)  评论(0)  编辑  收藏  举报