详解微信小程序自定义组件的实现及数据交互

下面我给出详解微信小程序自定义组件的实现及数据交互的完整攻略。内容分为以下几部分：

1. 自定义组件的概念及基本用法
2. 自定义组件的实现步骤
3. 自定义组件与页面的数据交互
4. 示例说明

1. 自定义组件的概念及基本用法

自定义组件是一种可以重复使用的自定义元素，由类似视图和逻辑的 WXML, WXSS 和 JS 结合而成。一般情况下，自定义组件的结构是由：

• wxml 文件定义结构
• wxss 文件定义样式
• js 文件定义行为和逻辑

组成，可以通过自定义组件来提高代码的复用性和可维护性。

2. 自定义组件的实现步骤

在微信小程序中，创建自定义组件的步骤如下：

1. 创建一个文件夹，命名为 “component-name”
2. 在该文件夹下创建 .wxml、.wxss、.js 文件，分别用于定义组件的结构、样式及行为逻辑。其中，.wxml 中需要使用 <slot> 标签，用于定义组件内部的插槽，对于未指定 name 属性的插槽，默认使用 name 为 “default”。
3. 在.js 文件中通过 Component 构造器定义组件，可以在构造器中设置组件的属性、生命周期函数、方法及数据等。

自定义组件的使用步骤如下：

1. 在页面的 .json 文件中声明使用该组件：

{
  "usingComponents": {
    "component-name": "/path/to/component/component-name"
  }
}

1. 在页面的 .wxml 文件中使用组件：

<component-name prop1="value1" />

其中，prop1 是组件的属性名，value1 是该属性的值。

3. 自定义组件与页面的数据交互

在自定义组件中，可以通过 this.triggerEvent() 发射自定义事件，从而与页面进行通信。this.triggerEvent(eventname, params) 这个方法接受两个参数：

• 事件名称 (eventname)：自定义事件名，需要在组件中通过 this.triggerEvent(eventname) 来触发该事件。
• 事件参数 (params)：传递给事件处理函数的参数对象。

在页面中，可以通过给自定义组件添加自定义事件处理函数来处理自定义事件。在组件中通过 this.triggerEvent 触发自定义事件后，页面中绑定的自定义事件处理函数将被触发，并传递事件参数。

4. 示例说明

下面通过两个示例来说明自定义组件的实现和与页面的数据交互：

示例一：计数器组件

假设我们需要在多个页面都需要使用一个计数器，那么我们可以通过自定义组件来实现。具体实现步骤如下：

1. 在 components 文件夹下创建一个名为 counter 的自定义组件，如下所示：

2. counter.wxml

<view class="counter">
  <button class="button" bindtap="handleDecrement">-</button>
  <text class="number">{{number}}</text>
  <button class="button" bindtap="handleIncrement">+</button>
</view>

• counter.wxss

.counter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.number {
  margin: 0 20rpx;
}

• counter.js

Component({
  properties: {
    number: {
      type: Number,
      value: 0
    }
  },

  methods: {
    handleIncrement() {
      const number = this.data.number + 1;
      this.setData({
        number
      });
      this.triggerEvent('change', {
        number
      });
    },
    handleDecrement() {
      const number = this.data.number - 1;
      this.setData({
        number
      });
      this.triggerEvent('change', {
        number
      });
    }
  }
});

1. 在页面的 .json 文件中声明 counter 自定义组件：

{
  "usingComponents": {
    "counter": "/path/to/component/counter"
  }
}

1. 在 .wxml 文件中使用 counter 组件，并绑定 change 事件：

<view class="container">
  <counter number="{{count}}" bind:change="handleCounterChange" />
</view>

1. 在页面的 .js 文件中设置 count 的初始值，以及处理自定义事件的 handleCounterChange 函数：

Page({
  data: {
    count: 0
  },

  handleCounterChange(event) {
    const { number } = event.detail;
    this.setData({
      count: number
    });
  }
});

这样，当我们在计数器组件中按下 + 或 - 按钮时，会触发自定义事件 change，并传递修改后的计数器值。在页面的 handleCounterChange 函数中获取到这个值后，再更新到页面的 data 中，即可在页面上实时显示计数器的值。

示例二：评分组件

假设我们需要在页面中显示一个评分组件，那么我们可以通过自定义组件来实现。具体实现步骤如下：

1. 在 components 文件夹下创建一个名为 star-rating 的自定义组件，如下所示：

2. star-rating.wxml

<view class="rating">
  <navigator class="star {{index >= rating ? 'off' : 'on'}}" hover-class="none" wx:for="{{5}}" wx:key="{{index}}" data-index="{{index}}" bindtap="handleStarClick">
    <text class="iconfont icon-star"></text>
  </navigator>
</view>

• star-rating.wxss

.rating {
  display: flex;
}

.star {
  font-size: 50rpx;
  color: #f6ad42;
}

.on {
  color: #f6ad42;
}

.off {
  color: #ccc;
}

• star-rating.js

Component({
  properties: {
    rating: {
      type: Number,
      value: 0
    },
    disabled: {
      type: Boolean,
      value: false
    }
  },

  methods: {
    handleStarClick(event) {
      if (this.data.disabled) {
        return;
      }
      const { index } = event.currentTarget.dataset;
      this.triggerEvent('change', {
        rating: index + 1
      });
    }
  }
});

1. 在页面的 .json 文件中声明 star-rating 自定义组件：

{
  "usingComponents": {
    "star-rating": "/path/to/component/star-rating"
  }
}

1. 在 .wxml 文件中使用 star-rating 组件，并绑定 change 事件：

<view class="container">
  <star-rating rating="{{rating}}" bind:change="handleRatingChange" />
</view>

1. 在页面的 .js 文件中设置 rating 的初始值，以及处理自定义事件的 handleRatingChange 函数：

Page({
  data: {
    rating: 0
  },

  handleRatingChange(event) {
    const { rating } = event.detail;
    this.setData({
      rating
    });
  }
});

这样，当我们在评分组件中点击星星时，会触发自定义事件 change，并传递当前评分值。在页面的 handleRatingChange 函数中获取到这个值后，再更新到页面的 data 中，即可在页面上实时显示评分的值。同时，通过控制 disabled 属性的值，可以决定评分组件是否可以交互。