微信小程序之自定义组件的实现代码（附源码）

接下来我将为大家详细介绍微信小程序中自定义组件的实现代码，并附上代码示例。

自定义组件的概述

什么是组件？

组件是由一些可复用的元素的集合，可以看成是一个包含了一些定义、样式、行为的模块。

什么是自定义组件？

组件可以分为两类：原生组件和自定义组件。我们通常所说的组件，指的是自定义组件。

自定义组件的优点

• 可以复用性强，可以在多个页面中使用。
• 可以自定义组件的样式、功能等，满足项目的需求。
• 可以大大减少代码冗余量，提高代码的可维护性。

自定义组件的实现方式

自定义组件是由两部分组成的：wxml文件和js文件。其中，wxml文件是组件的结构，js文件是组件的行为。下面我们来看一下自定义组件的实现方式。

• 在项目的根目录中创建目录 components，用于存放自定义组件的 wxml 和 js 文件。
• 在 components 目录中创建一文件夹，命名为 my-component。
• 在 my-component 目录中新建 my-component.wxml，写入组件的结构。
• 在 my-component 目录中新建 my-component.js，写入组件的 behavior 和事件处理函数等。
• 在需要使用组件的页面中引入组件，并使用组件标签进行调用。

下面我们来分别看一下 my-component.wxml 和 my-component.js 的代码实现。

my-component.wxml

<view class="container">
  <view class="title">{{ title }}</view>
  <view class="content">
    <slot></slot>
  </view>
</view>

上述代码中，我们定义了一个自定义组件 my-component。组件包含一个标题和正文。由于正文内容是在使用组件时传入的，我们使用 slot 标签来进行占位，等到使用组件时再进行替换。

my-component.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: String
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

上述代码中，我们定义了一个名为 my-component 的组件，并且定义了组件的属性 title。在需要传递参数时，可以在组件标签上使用类似属性名的形式进行传递。

下面我们来看一下自定义组件的使用方法。

使用示例一

<!-- index.wxml -->
<view>
  <my-component title="自定义标题">
    <view>这里是正文内容</view>
  </my-component>
</view>

上述代码中，我们在 index 页面中使用了自定义组件 my-component，并且传入了一个 title 和正文内容。

使用示例二

<!-- my-page.wxml -->
<import src="../../components/my-component/my-component.wxml"/>
<import src="../../components/my-component/my-component.wxss"/>
<import src="../../components/my-component/my-component.js"/>

<view class="container">
  <my-component title="自定义标题">
    <view>这里是正文内容</view>
  </my-component>
</view>

上述代码中，我们在 my-page 页面中引入了自定义组件的 wxml 文件，并且在自定义组件的标签中传入了 title 和正文内容。

通过上述示例，相信大家已经了解了自定义组件的实现方式和使用方法，可以通过以上步骤自己尝试编写自己的组件啦。