小程序自定义组件

一：定义组件

在miniprogram下的目录下创建一个components文件夹,与pages目录同级,这个文件夹专门是用来放自定义组件的 例如:在components目录下创建了一个count文件夹,然后在新建Component,组件名称命名为count,微信开发者工具会自动的创建count组件

// =============count.wxml==================
<view>
  <view class="count-container">
    <view bindtap="reduce" class="{{count == 1? 'btn-disabled': ''}}}">-</view>
    <input bindinput="handleInput" type="number" value="{{count}}" />
    <view bindtap="add">+</view>
  </view>
</view>

// =============count.js================

// components/count/count.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    count: Number,
  },

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

  /**
   * 组件的方法列表
   */
  methods: {
    reduce() {
      var count = this.data.count - 1;
      if (count < 1) {
        count = 1;
      }
      this.setData({
        count,
      });
      this.triggerEvent('changeCount', count);
      console.log(this.data.count);
    },

    add() {
      var count = this.data.count + 1;
      this.setData({
        count,
      });
      this.triggerEvent('changeCount', count);
      console.log(this.data.count);
    },

    handleInput(event) {
      this.setData({
        count: event.detail.value,
      });
      this.triggerEvent('changeCount', event.detail.value); // 向外暴露函数
    },
  },
});

二：使用组件

在pages目录下,这里我创建了一个customComponents页面

在要使用页面对应的customComponents.json中的usingComponents自定义组件的名称,同时引入组件的路径

// customComponents.json
{
  "usingComponents": {
    "count":"/components/count/count"
  }
}

// customComponents.wxml

<count count="{{countNum}}" bind:changeCount="handleCount"></count>
<view class="parentText">父组件count:{{countNum}}</view>

****// pages/customComponents/customComponents.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    countNum: 1,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {},

  // 父组件中自定义绑定的事件
  handleCount(event) {
    this.setData({
      countNum: event.detail, // 获取子组件传递过来的值
    });
  },
});

三：小程序中组件的通信与事件

• 父传子

  • wxml数据绑定:用于父组件向子组件指定属性设置数据,在子组件中properties对象接收外部(父)组件传过来的自定义属性数据,可以是对象,数组,基本数据类型等。

  注释： properties类似于vue中的props,react中的this.props

• 子传父

  • 事件: 用于子组件通过 this.triggerEvent()向父组件传递数据,可以传递任意数据,父组件通过绑定绑定监听事件，从而触发父组件自定义事件,event.detail是子组件传递过来的值。

  注意： triggerEvent,就相当于vue中的this.$emit('绑定在父组件自定义事件名称',携带的数据)方法的,而在React中是通过this.props.方法接收,调用父组件的方法。

• 在父组件中还可以通过this.selectComponent("类名或ID")方法获取子组件的实例对象,这样在父组件中不必通过event.detail的方式获取,可以直接访问子组件任意的数据和方法。

前提条件:

需要在父组件的引用自定义组件上,添加class或id

<count
 class="count"
 count="{{countNum}}"
 bind:changeCount="handleCount"
></count>

那么,在父组件中的handleCount中里调用 this.selectComponent，获取子组件的实例数据

调用时需要传入一个匹配选择器 class与Id都可以,如,this.selectComponent('类或ID')

 handleCount(){
    var count = this.selectComponent('.count'); // 获取子组件的实例
    this.setData({
      countNum: count.data.count  // 重新赋值setData countNum数据
    })

  }