<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .header{
            width: 100%;
            height: 50px;
            background: green;
        }
        .left{
            width: 50%;
            height: 800px;
            background: pink;
            float: left;
        }
        .right{
            width: 50%;
            height: 800px;
            background: greenyellow;
            float: right;
        }
        .foot{
            overflow: auto;
            width: 100%;
            height: 50px;
            background: gold;
        }
    </style>
</head>

<body>
    <div id="app">
        <my-page>  <!--这里div的位置放置的顺序不会影响组件的顺序-->
            <div class="header" slot="header">
                <page-header></page-header>
            </div>
            <div class="left" slot="left">
                <page-left></page-left>
            </div>
            <div class="right" slot="right">
                <page-right></page-right>
            </div>
            <div class="foot" slot="footer">
                <page-footer></page-footer>
            </div>
        </my-page>
    </div>
</body>
<script>
    Vue.component("myPage",{
        template:"<div>" +      // 这里slot的位置放置的顺序会影响在页面组件的顺序
                    " <slot name='header'></slot>" +
                    " <slot name='left'></slot>" +
                    " <slot name='right'></slot>" +
                    " <slot name='footer'></slot>" +
                  "</div>"
    });
    Vue.component("page-header",{
        template:"<div>我是头部</div>"
    })
    Vue.component("page-left",{
        template:"<div>我是left</div>"
    })
    Vue.component("page-right",{
        template:"<div>我是right</div>"
    })
    Vue.component("page-footer",{
        template:"<div>我底部</div>"
    })

    new Vue({
        "el":"#app",
        "data":{
            "msg":"有没程序员妹纸"
        }
    })
</script>
</html>
Logo

前往低代码交流专区

更多推荐