Vue---slot--->>高级--组件嵌套

最新推荐文章于 2024-07-07 22:58:19 发布

郭浩326

最新推荐文章于 2024-07-07 22:58:19 发布

阅读量4.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/guohao326/article/details/72791123

版权

vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!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>

郭浩326

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue---slot--->>高级--组件嵌套

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="js/vue.js">script> style> .header{ width: 100%; height: 50px;
复制链接

扫一扫

专栏目录