抽象节点
官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/generics.html
有时,自定义组件模版的一些节点,其对应的自定义组件不是由自定义组件本身确定,而是由自定义组件的调用者确定的,
这时就可以把这个节点声明为抽象节点。
- 这个特性自小程序基础库版本 1.9.6 开始支持。
代码实操
//文件结构
-components
-generics
-custom-checkbox.js
-...
-custom-radio.js
-...
-default.js
-...
-selected-group.js
-...
-pages
-index
-index.js
调用关系图
- custom-checkbox.wxml
<checkbox disabled="{{ disabled }}" checked="{{ selected }}"></checkbox>
- custom-checkbox.js
Component({
properties: {
disabled:Boolean,
selected:Boolean
},
})
- custom-radio.wxml
<radio disabled="{{disabled}}" checked="{{ selected }}"></radio>
- custom-radio.js
Component({
properties: {
disabled:Boolean,
selected:Boolean
},
})
- selected-group.wxml
<!--抽象节点 -->
<view wx:for="{{labels}}" wx:key="this">
<label bindtap="itemtap" data-index="{{index}}">
<!-- 写抽象节点 -->
<selectable disable="{{false}}" selected="{{selected[index]}}"/>
{{item}}
</label>
</view>
- selected-group.js
Component({
data: {
labels:[1,2,3],
selected:[false,true,false]
},
})
- selected-group.json
{
"component": true,
"usingComponents": {},
"componentGenerics":{
"selectable": {
"default": "./default"
}
}
}
- default.wxml
<text>开发中...</text>
- index.json
{
"usingComponents": {
"selected-group":"/components/generics/selected-group",
"custom-checkbox":"/components/generics/custom-checkbox",
"custom-radio":"/components/generics/custom-radio"
}
}
- index.wxml
<view>
<!-- generic:xxx="yyy" yyy是静态值 -->
<selected-group generic:selectable="custom-checkbox"></selected-group>
<selected-group generic:selectable="custom-radio"></selected-group>
//对应default.wxml
<selected-group generic:selectable="default"></selected-group>
</view>
![截屏2021-09-25 上午1.47.34](https://i-blog.csdnimg.cn/blog_migrate/4034b48f7b3657849b894baba9b2e57c.png)