首页 > 其他 > 详细

slot单个插槽实例

时间:2017-10-24 23:35:22      阅读:290      评论:0      收藏:0      [点我收藏+]
    <div id="app">
        <div>
            <h1>我是爸爸</h1>
            <my-component>
                <p>儿子p</p>
                <p>儿子p2</p>
            </my-component>
        </div>
    </div>
        Vue.component(‘my-component‘,{
            template:                <div>                    <h2>儿子h2</h2>                    <slot></slot>                </div>            
        })
        new Vue({
            el:‘#app‘
        })
从渲染后的图中可以看出,slot承载了自定义标签中的2个p元素
技术分享
官文:除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃。我们可以来尝试一下,删除slot标签
技术分享
最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
尝试删除<my-component>中的2个p元素,并且在template中添加几个文本<slot>备用内容</slot>,渲染结果如下:
技术分享

slot单个插槽实例

原文:http://www.cnblogs.com/ItIsInteresting/p/7726367.html

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