《九》微信小程序中的自定义组件

本文链接：https://blog.csdn.net/wsln_123456/article/details/109235161

本文详细介绍了小程序中自定义组件的创建和使用，包括组件的构成、Component()注册、数据和逻辑处理。此外，还讲解了抽象节点的概念，如何在组件中声明和使用抽象节点，并讨论了抽象节点的默认组件配置。通过自定义组件和抽象节点，开发者能更灵活地组织和复用代码，提高小程序的开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序支持组件化开发。可以将页面拆分成一个个小的、可复用的组件，其中包含内置组件（常用的内置组件具体内容在第十三节）、自定义组件和第三方组件（比较常用的第三方组件有 vant）。使代码更加方便管理和扩展。
请添加图片描述

自定义组件：

自定义组件：可复用的 WXML、WXSS、JS、JSON。
behavior：可复用的组件 JS（属性、数据、生命周期函数和方法等）。
wxs：可复用的普通 JS。
template 模板：可复用的 WXML。

创建自定义组件：

自定义组件类似于页面，也是由 wxml、wxss、json、js 4个文件组成。

在 json 文件中进行自定义组件声明：将 component 字段设为 true 可将这一组文件设为自定义组件。
```
/* custom-component.json */
{
  "component": true
}
```

在 wxml 文件中编写组件模板；在 wxss 文件中编写组件样式；在 js 文件中使用 Component() 注册组件编写逻辑。

<!-- custom-component.wxml -->
<view class="container">
  {{text}}
</view>

/* custom-component.wxss */
.container {
  color: #FF4A2F;
}

// custom-component.js
Component({
  data: {
    text: 'Hello World',
  },
})

使用自定义组件：

在使用自定义组件的页面的 json 文件中进行引用声明：需要提供自定义组件的标签名和对应的文件路径。

除了可以在页面中引用自定义组件外；自定义组件中也可以引用自定义组件，引用方法也是使用 usingComponents 字段。

如果在 app.json 的 usingComponents 中声明了某个组件，那么所有页面和自定义组件都可以直接使用该组件。
```
/* index.json */
{
  "usingComponents": {
    // 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符
    "custom-component": "components/custom-component/custom-component"
  }
}
```
在使用自定义组件的页面的 wxml 中就可以像使用基础组件一样使用自定义组件：节点名即自定义组件的标签名，节点属性即传递给自定义组件的属性。
```

<custom-component></custom-component>
```

抽象节点：

有时，自定义组件中的一些节点，其对应的自定义组件不是由自定义组件本身确定的，而是自定义组件的调用者确定的。这时可以把这个节点声明为“抽象节点”。

在自定义组件中使用抽象节点：

// 实现一个选框组 selectable-group组件，它其中可以放置单选框 custom-radio 或者复选框 custom-checkbox
<!-- selectable-group.wxml -->
<view wx:for="{{labels}}">
  <label>
    <selectable disabled="{{false}}"></selectable>
    {{item}}
  </label>
</view>

selectable 不是任何在 json 文件的 usingComponents 字段中声明的组件，而是一个抽象节点，它需要在 componentGenerics 字段中声明。

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

在页面中使用包含抽象节点的自定义组件：

节点的 generic 引用 generic:xxx=“yyy” 中，值 yyy 只能是静态值，不能包含数据绑定。因而抽象节点特性并不适用于动态决定节点名的场景。
```
// 在使用 selectable-group 组件时，必须指定“selectable”具体是哪个组件
<selectable-group generic:selectable="custom-radio" />
```
```
{
  "usingComponents": {
    "custom-radio": "path/to/custom/radio",
  }
}
```

抽象节点的默认组件：

抽象节点可以指定一个默认组件，当具体组件未被指定时，将创建默认组件的实例。默认组件可以在 componentGenerics 字段中指定。

{
  "componentGenerics": {
    "selectable": {
      "default": "path/to/default/component"
    }
  }
}