美文网首页小程序
小程序中的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(插槽)

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

  • 小程序 slot插槽

    组件wxml的slot 在组件的wxml中可以包含 slot 节点,用于承载组件使用者提供的wxml结构。默认情况...

  • vue slot匿名插槽 / 具名插槽 / 作用域插槽

    slot 匿名插槽 slot 具名插槽 应用场景 slot 作用域插槽: 在父组件中可以获得子组件的数据,并在父组...

  • vue插槽slot详解

    插槽分类:具名插槽与作用域插槽。在新版中(2.6.0)统一都叫v-slot指令,老版中称之为slot与slot-s...

  • slot-scope到底是什么

    插槽slot 插槽,也就是slot 插槽是组件的一块HTML模板 插槽就是要将父组件中的内容渲染到子组件中。就好像...

  • 插槽

    默认插槽: 具名插槽:slot name='footer' 作用域插槽:v-slot===slot-scope 默...

  • vue中的slot(插槽)

    vue中的插槽————slot 什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定...

  • 2-6 vue 匿名插槽-slot

    匿名插槽-slot Slot插槽 —— 实现内容分发 什么是slot?slot的意思是插槽,其目的在于让组件的可扩...

  • Vue之深入理解插槽—slot, slot-scope, v-s

    Vue 2.6.0 以前Vue 2.6.0 以后具名插槽 slot具名插槽 v-slot作用域插槽 slot-sc...

  • 18、Vue3 作用域插槽

    作用域插槽:让插槽内容能够访问子组件中,vue2中作用域插槽使用slot-scope,vue3中使用v-slot ...

网友评论

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

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