vue solt(插槽)用法小结

    技术2022-07-10  100

    之前看vue官方文档,对slot插槽分发理解模糊,最近项目中使用了slot,便梳理总结了一下,如下为我的理解:

    一般vue的slot用法有两种,一种是单独使用,一种是具名solt

    1.单独使用:

      如下,如果子组件中没有使用slot,则父组件中的文本不会显示:

      父组件代码:

      

      子组件代码:

      

      运行现象:

      

     当子组件使用slot分发时,具体代码和现象如下:

     子组件:

     

    运行现象:

    2.具名slot

      <slot>元素在子组件中定义属性name的值,与父组件中的slot值相呼应,则分发成功;否则,分发失败

    如下:

    父组件:

    子组件:

    运行现象:

     

     

     

     

    Processed: 0.013, SQL: 9