微信小程序中如何使用动态组件？

站长

2023年07月08日 15:41 · 阅读数 16

1.问题描述

微信小程序中如何使用动态组件？

最近在做一个领券中心的项目，里面会存在不同样式的优惠券（差异还比较大，有条形进度条类型的，环形进度条类型的等），我第一想到的做法抽象出一个组件，微信小程序中也支持自定义组件。但是我又思考，这是最好的做法吗？把各种样式的优惠券逻辑写在一个组件内，那文件的处理逻辑是不是很多？如果之后要修改，好不好维护呢？

2.摸索方案

小程序中有没有类型动态组件的方式呢？每个优惠券样式都是一个组件，就像下面一样使用，这样会很方便后期维护。

   <component :is="componentName"></component>

于是我开始查找官方文档。

抽象结点？

官方文档定义：自定义组件模板中的一些节点，其对应的自定义组件不是由自定义组件本身确定的，而是自定义组件的调用者确定的。这时可以把这个节点声明为“抽象节点”。下面是官方的示例：首先要在自定义组件的json文件中声明 componentGenerics 字段：

{
"componentGenerics": {
 "selectable": true
}
}

然后再自定义组件中使用：

<selectable-group generic:selectable="custom-radio" />
<selectable-group generic:selectable="custom-checkbox" />

别忘了在自定义组件的json文件中配置对应用到的组件

{
  "usingComponents": {
    "custom-radio": "path/to/custom/radio",
    "custom-checkbox": "path/to/custom/checkbox"
  }
}

咋一看可行呢！如果generic字段支持变量那不就符合我的需求了吗？还是高兴的太早了，官方文档最后的注意事项中指出

节点的 generic 引用 generic:xxx="yyy" 中，值 yyy 只能是静态值，不能包含数据绑定。因而抽象节点特性并不适用于动态决定节点名的场景。所以这个方案排除了

模板(`template`)和引用(`import`)？

模板的使用方式是这种的

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>