码迷,mamicode.com
首页 > 其他好文 > 详细

slot单个插槽实例

时间:2017-10-25 00:36:45      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:组件   实例   es2017   class   new   结果   component   作用域   爸爸   

    <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单个插槽实例

标签:组件   实例   es2017   class   new   结果   component   作用域   爸爸   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!