自定义组件-抽象节点

抽象节点

官方文档：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>