比较

了解了微信小程序的抽象节点组件封装方式之后，觉得与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 只能是静态值，不能包含数据绑定。因而抽象节点特性并不适用于动态决定节点名的场景。