小程序 抽象节点 selectable 与slot区别

比较

了解了微信小程序的抽象节点组件封装方式之后，觉得与vue的slot使用类似，但也有些区别 ：

抽象节点 和 slot 有什么不同：

• slot只需要你传入一段代码
• 抽象节点需要你传入一个自定义组件，，不是让你只传递一段代码

抽象节点更加灵活，，将所有自定义权限都交给了调用者。

官方文档：

抽象节点 | 微信开放文档

抽象节点案例

以下小程序抽象节点案例效果图，单选与筛选框是2个封装好的组件component, 

第三个组件是抽象节点组件： selectable-group

此处显示调用是由父组件调用者index页面决定的

 项目结构：

 custom-checkbox组件

// index/custom-checkbox.js
Component({
  properties: {
    disabled: Boolean,
    selected: Boolean,
  },
})






//json
{
  "component": true,
  "usingComponents": {}
}

custom-radio组件

// index/custom-radio.js
Component({
  properties: {
    disabled: Boolean,
    selected: Boolean,
  },
})




//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

  

    
    {{item}}
  



/* 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
selectable-group with custom-radio 抽象节点用单选框

selectable-group with 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 组件的实例时，“selectable”节点会生成“custom-radio”组件实例。类似地，如果这样使用：

“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 只能是静态值，不能包含数据绑定。因而抽象节点特性并不适用于动态决定节点名的场景。