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;
            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 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:"
" + // 这里slot的位置放置的顺序会影响在页面组件的顺序 " " + " " + " " + " " + "
"
}); Vue.component("page-header",{ template:"
我是头部
"
}) Vue.component("page-left",{ template:"
我是left
"
}) Vue.component("page-right",{ template:"
我是right
"
}) Vue.component("page-footer",{ template:"
我底部
"
}) new Vue({ "el":"#app", "data":{ "msg":"有没程序员妹纸" } }) script> html>

你可能感兴趣的:(vue)