微信小程序 组件和slot_微信小程序slot传参的坑及代替方案
需求:在for循环的节点里像vue一样使用slot并传入参数。希望是如下的:创建组件:list.wxml如下在页面page.wxml使用组件,并给slot定义内容如下{{item}}然,微信小程序却坑得你不省人事。第一坑:不管你for多少个,它最终只渲染一个第二坑:不支持传参于是,slot唯一的用处就是在指定的位置贴一块固定代码,是一个弱智的template引用,别无它用。代替方案:抽象组件将li
需求:
在for循环的节点里像vue一样使用slot并传入参数。希望是如下的:
创建组件:list.wxml如下
在页面page.wxml使用组件,并给slot定义内容如下
{{item}}
然,微信小程序却坑得你不省人事。
第一坑:不管你for多少个,它最终只渲染一个
第二坑:不支持传参
于是,slot唯一的用处就是在指定的位置贴一块固定代码,是一个弱智的template引用,别无它用。
代替方案:抽象组件
将list.wxml组件改为:
并在list.json中配置“componentGenerics"
{
"component": true,
"componentGenerics": {
"item": {
"default": "/components/default/default"
}
}
}
在page.wxml中使用:引入组件item,在list节点添加generic:item="item",第一个item表示抽象节点名称,与list.wxml组件内声明的抽象节点名称要一致;第二个“item”表示要插入的组件名,可以改为别的名称,但要与usingComponents中配置的名称一致。如下
{
"usingComponents": {
"item": "../item/item"
}
}
创建item.wxml组件作为“插槽”内容
{{item}}
Component({
properties: {
item: Object
}
})
解决!
这种功能本来就应该给slot的解决的,小程序非得整个标新立异。
那么问题来了,多层组件嵌套时,怎么搞?
对,就跟想象中的一样,一层一层的配置componentGenerics和设置generic:xxx即可。
更多推荐
所有评论(0)