美文网首页小程序
小程序中的slot(插槽)

小程序中的slot(插槽)

作者: ibiaoma | 来源:发表于2018-11-23 15:43 被阅读65次

    有时候在自定义组件时,有一部分在某处是不需要显示的,而其他地方需要显示,这时候,可以用slot来控制隐藏的部分;

    slot 标签可用在自定义组件中,根据外部传进来的标签,来显示和隐藏
    如果需要显示就传递标签进来,如果不需要显示,就不传,这样,可以动态的设置自定义组件的样式,提高了组件的复用性

    自定义组件,添加插槽,插槽的name一定要设置,使用时name要相同
    <view class='container'>
      <text>{{text}}</text>
      <!-- slot 插槽 -->
      <slot name="after"></slot>
    </view>
    
    使用组件,组件名为<m-tag/>,name 要和添加时候一直(after)
     <m-tag text="{{item.content}}">
        <text slot="after">{{item.nums}}</text>
     </m-tag>
    里面的<text>标签就是传递给插槽的,
    

    注意:最重要的是激活插槽,在自定义组件的JS中,添加一下代码

     /**
       * 启用插槽
       */
      options:{
        multipleSlots: true
      }
    

    下图是传递一个<text>标签进来,用来显示数字


    image.png

    下图是没有传递标签的时候


    image.png

    相关文章

      网友评论

        本文标题:小程序中的slot(插槽)

        本文链接:https://www.haomeiwen.com/subject/ygmjqqtx.html