小程序中的slot(插槽)

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

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

自定义组件,添加插槽,插槽的name一定要设置,使用时name要相同

  {{text}}
  
  

使用组件,组件名为,name 要和添加时候一直(after)
 
    {{item.nums}}
 
里面的标签就是传递给插槽的,

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

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

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


image.png

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


image.png

你可能感兴趣的:(小程序中的slot(插槽))