首页 > 其他 > 详细

14VUE插槽

时间:2021-02-06 10:42:42      阅读:22      评论:0      收藏:0      [点我收藏+]
<!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>

 

14VUE插槽

原文:https://www.cnblogs.com/tilyougogannbare666/p/14380532.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!