微信小程序slot传参的坑及代替方案

需求:

在for循环的节点里像vue一样使用slot并传入参数。希望是如下的:

创建组件:list.wxml如下

<!-- list.wxml -->
<view wx:for="{{list}}" wx:key="index">
    <slot item="{{item}}"></slot>
</view>

在页面page.wxml使用组件,并给slot定义内容如下

<!-- page.wxml -->
<list>
  <block slot-scope="item">
    <view>{{item}}</view>
  </block>
</list>

然,微信小程序却坑得你不省人事。

  1. 第一坑:不管你for多少个,它最终只渲染一个
  2. 第二坑:不支持传参

于是,slot唯一的用处就是在指定的位置贴一块固定代码,是一个弱智的template引用,别无它用。

代替方案:抽象组件

将list.wxml组件改为:

<!-- list.wxml -->
<view wx:for="{{list}}" wx:key="index">
    <item item="{{item}}"></item>
</view>

并在list.json中配置“componentGenerics"

{
  "component": true,
  "componentGenerics": {
    "item": {
      "default": "/components/default/default"
    }
  }
}

在page.wxml中使用:引入组件item,在list节点添加generic:item="item",第一个item表示抽象节点名称,与list.wxml组件内声明的抽象节点名称要一致;第二个“item”表示要插入的组件名,可以改为别的名称,但要与usingComponents中配置的名称一致。如下

<!-- page.wxml -->
<list generic:item="item"></list>
{
  "usingComponents": {
    "item": "../item/item"
  }
}

创建item.wxml组件作为“插槽”内容

<!-- item.wxml -->
<view>{{item}}</view>
Component({
  properties: {
    item: Object
  }
})

解决!

这种功能本来就应该给slot的解决的,小程序非得整个标新立异。

那么问题来了,多层组件嵌套时,怎么搞?

对,就跟想象中的一样,一层一层的配置componentGenerics和设置generic:xxx即可。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容