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;

郭浩326

4217人浏览 · 2017-05-28 10:50:41

郭浩326 · 2017-05-28 10:50:41 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^