zoukankan      html  css  js  c++  java
  • vue之slot,组件标签嵌套

    vue之slot,组件标签嵌套

    插槽(Slot),在各种vue的ui插件中,经常见到的多个组件标签相互嵌套(如下)就是以此为基础的。

     <el-col >
           <el-checkbox >
    </el-col>

    而我们也经常会用到这种场景,例如封装一个边框样式的组件,组件中的内容,可以通过这种方式制作,或者将子组件提取到父组件中进行操作等等。

    slot分为两种情况,匿名和具名。

    1.匿名

    例子:

    子组件:

    <div>
        <h2>我是子组件的标题</h2>
        <slot></slot>   /*这里插入父组件在引用子组件内部的内容*/
    </div>

    父组件:

    <div>
        <h1>我是父组件的标题</h1>
        <my-component>
            <p>这是一些初始内容</p>
            <p>这是更多的初始内容</p>
        </my-component>
    </div>

    父组件p标签的位置也可以放一些其他组件。my-component标签中的内容,会插入到该组件slot标签的位置。

    当渲染后,就会变成:

    <div>
        <h1>我是父组件的标题</h1>
        <div>
            <h2>我是子组件的标题</h2>
            <p>这是一些初始内容</p>
            <p>这是更多的初始内容</p>
        </div>
    </div>

    2.具名:

    具名slot其实就是对匿名slot的补充,它可以做到将组件插入到子组件的指定位置。

    例子:

    子组件:

    <div>
        <slot name="header"></slot>
        <slot name="footer"></slot>
        <slot></slot>
    </div>

    父组件:

    <my-component>
        <p>Lack of anonymous slot, this paragraph will not shown.</p>
        <p slot="footer">Here comes the footer content</p>
        <p slot="header">Here comes the header content</p>
    </my-component>

    渲染结果:

    <div>
        <p>Here comes the header content</p>
        <p>Here comes the footer content</p>
        <p>Lack of anonymous slot, this paragraph will not shown.</p>
    </div>

    参考自:https://blog.csdn.net/u014628388/article/details/76100400

  • 相关阅读:
    AppBoxFuture(六): 前端组件化开发
    AppBoxFuture(五): 分布式文件存储-Store Everything
    Mysql自动填充测试数据
    萌新带你开车上p站(番外篇)
    B站百大UP主党妹被黑客勒索!!!
    合天网络靶场-大规模网络环境仿真服务平台
    XSS语义分析的阶段性总结(二)
    想学习CTF的一定要看这篇,让你学习效率提升80%
    XSS语义分析的阶段性总结(一)
    逆向入门分析实战(二)
  • 原文地址:https://www.cnblogs.com/s313139232/p/9965254.html
Copyright © 2011-2022 走看看