比较
了解了微信小程序的抽象节点组件封装方式之后，觉得与vue的slot使用类似，但也有些区别 ：
抽象节点 和 slot 有什么不同：
- slot只需要你传入一段代码
- 抽象节点需要你传入一个自定义组件，，不是让你只传递一段代码
抽象节点更加灵活，，将所有自定义权限都交给了调用者。
官方文档：
抽象节点案例
以下小程序抽象节点案例效果图，单选与筛选框是2个封装好的组件component,
第三个组件是抽象节点组件： selectable-group
此处显示调用是由父组件调用者index页面决定的
项目结构：
custom-checkbox组件
// index/custom-checkbox.js
Component({
properties: {
disabled: Boolean,
selected: Boolean,
},
})
<!--index/custom-checkbox.wxml-->
<checkbox disabled="{
{disabled}}" checked="{
{selected}}"></checkbox>
//json
{
"component": true,
"usingComponents": {}
}custom-radio组件
// index/custom-radio.js
Component({
properties: {
disabled: Boolean,
selected: Boolean,
},
})
<!--index/custom-radio.wxml-->
<radio disabled="{
{disabled}}" checked="{
{selected}}"></radio>
//json
{
"component": true,
"usingComponents": {}
}selectable-group：含抽象节点组件
// index/selectable-group.js
Component({
data: {
labels: [1, 2, 3],
selected: [false, false, false],
},
methods: {
itemTap: function(e) {
var selected = [false, false, false];
selected[e.currentTarget.dataset.index] = true;
this.setData({
selected: selected
})
}
}
})
//index/selectable-group.wxml
<view wx:for="{
{labels}}" wx:key="*this">
<label bindtap="itemTap" data-index="{
{index}}">
<!-- 抽象节点： 由父组件决定这里要填充什么东西， 类似 slot-->
<selectable disabled="{
{false}}" selected="{
{selected[index]}}"></selectable>
{
{item}}
</label>
</view>
/* index/selectable-group.wxss */
:host {
display: block;
}
// json :需要开启抽象节点使用 "selectable": true
{
"component": true,
"usingComponents": {},
"componentGenerics": {
"selectable": true
}
}
抽象节点在json配置，其中，“selectable”不是任何在 json 文件的 usingComponents 字段中声明的组件，而是一个抽象节点。它需要在 componentGenerics 字段中声明：
{
"componentGenerics": {
"selectable": true
}
}index页面
//index.js
const app = getApp()
Page({
data: {
},
onLoad: function () {
},
})
//index.wxml
<view>selectable-group with custom-radio 抽象节点用单选框</view>
<selectable-group generic:selectable="custom-radio" />
<view>selectable-group with custom-checkbox 抽象节点用多选框</view>
<selectable-group generic:selectable="custom-checkbox" />
//index.wxss
.intro {
margin: 30px;
text-align: center;
}
// index.json
{
"usingComponents": {
"selectable-group": "/components/selectable-group/selectable-group",
"custom-radio": "/components/custom-radio/custom-radio",
"custom-checkbox": "/components/custom-checkbox/custom-checkbox"
}
}
使用包含抽象节点的组件
index.wxml中，在使用 selectable-group 组件时，必须指定“selectable”具体是哪个组件：
<selectable-group generic:selectable="custom-radio" />这样，在生成这个 selectable-group 组件的实例时，“selectable”节点会生成“custom-radio”组件实例。类似地，如果这样使用：
<selectable-group generic:selectable="custom-checkbox" />
“selectable”节点则会生成“custom-checkbox”组件实例。
注意：上述的 custom-radio 和 custom-checkbox 需要包含在这个 wxml 对应 json 文件的 usingComponents 定义段中。
{
"usingComponents": {
"custom-radio": "path/to/custom/radio",
"custom-checkbox": "path/to/custom/checkbox"
}
}
注意事项
- 节点的 generic 引用
generic:xxx="yyy"中，值yyy只能是静态值，不能包含数据绑定。因而抽象节点特性并不适用于动态决定节点名的场景。