vue插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <child>
        <div class="header" slot="header">header</div>
        <div class="footer" slot="footer">footer</div>
    </child>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
    Vue.component('child', {
        template: `<div>
                        <slot name="header"></slot>
                        <div>content</div>
                        <slot name="footer"></slot>
                    </div>`,
        data: function () {
            return{

            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {}
    })
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • http://lizhihua.me/2016/11/26/vue/component_scoped%20slot/
    凯旋阅读 262评论 0 0
  • 在父组件调用子组件的时候,可以给子组件放置插槽内容,可以用 header footer 这种形式,加上slot...
    蘑菇酱960903阅读 305评论 0 0
  • 看上面的代码,父模板里面显示子模板 ,显示结果是不会显示菜单1 菜单2 的. 那如果想在子模板里面显示菜单1 菜单...
    剁椒鸡蛋zy阅读 585评论 0 0
  • By Leaf 在学习的过程中遇到了Vue的slot元素,开始不知道也不了解它的用途、用法,即然遇到了不懂的知识点...
    HYC_阅读 5,102评论 7 42
  • 插槽的定义: 插槽的使用:
    panw3i阅读 307评论 0 0