美文网首页
在vue中插槽的使用

在vue中插槽的使用

作者: blank的小粉er | 来源:发表于2018-06-14 16:55 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="root">
            <child>
                <div slot="header">header</div>
                <div slot="footer">footer</div>
            </child>
        
        </div>
    
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    
        <script>
        
            Vue.component('child',{
                template:`<div>
                              <slot name="header"></slot>
                               <p>hello</p>
                               <slot name="footer"></slot>
                               
                            </div>`,            
            })
        var vm=new Vue({
            el:"#root"
        })
    </script>
    </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:在vue中插槽的使用

          本文链接:https://www.haomeiwen.com/subject/plwyeftx.html