ちょうきょう666

导航

14VUE插槽 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>插槽</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="root">
            <body-content>
            <div class="header" slot='header'>
                header
            </div>
            <div class="footer" slot='footer'>
                footer
            </div>
            </body-content>
        </div>
        <script>
            
            Vue.component('body-content',{
                template:`
                <div>
                  <slot name='header'></slot>
                  <div class='content'>content</div>
                  <slot name='footer'></slot>
                </div>`
                
            })
            var vm=new Vue({
                el:"#root"
            })
        </script>
    </body>
</html>

 

posted on 2021-02-06 08:21  ちょうきょう666  阅读(39)  评论(0)    收藏  举报