小程序-实现自定义组件以及自定义组件间的通信

 

 

前言

对于组件的封装,在小程序当中对于多个页面的复用有着重要的作用,小程序中注册的每个页面都是独立的

页面的显示view层与逻辑层是通过data进行绑定关联,若需要更改页面中的数据,则通过setData的方式进行修改

那么在小程序中如何自定义组件,以及自定义组件之间是如何进行通信呢

实例效果

通过上面一个简单的数字加减输入框组件,阅读完本文后,您将收获到

• 在小程序中如何自定义组件

• 在小程序页面中如何使用自定义组件

• 父(外部)组件如何向子组件传值

• 子组件如何接受父组件传递过来的值,同时渲染组件

• 子组件内如何进行事件交互,如何向父组件传递数据,影响父组件定义的数据

• 另一种方法父组件获取子组件的数据(非triggerEvent方式,即selectComponent)

• 达到某些条件时,如何禁止view的bindtap事件

•  数字加减输入框代码的优化

为什么要自定义组件?

每个小程序页面都可以看成一个自定义组件,当多个页面出现重复的结构时,可以把相同的部分给抽取出来封装成一个公共的组件,不同的部分,在页面中通过传参的方式传入组件,渲染出来即可,达到复用的目的

下面以一个简单的数字加减输入框组件为例,麻雀虽小,但五脏俱全。

怎么使用自定义组件?

在miniprogram下的目录下创建一个components文件夹,与pages目录同级,这个文件夹专门是用来放自定义组件的

例如:在components目录下创建了一个count文件夹,然后在新建Component,组件名称命名为count,微信开发者工具会自动的创建count组件

如下所示:

<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>

如下是 css 代码

/* components/count/count.wxss */
.count-container {
  width: 200rpx;
  display: flex;
  justify-content: center;
  border: 1px solid #ccc;
  margin: 30px auto;
}

.count-container view {
  width: 30px;
  text-align: center;
}

.count-container view:nth-child(1) {
  border-right: 1px solid #ccc;
}
.count-container view:nth-child(3) {
  border-left: 1px solid #ccc;
}

.count-container input {
  flex: 1;
  text-align: center;
}

.btn-disabled {
  background: #eee;
  pointer-events: none; /*微信小程序view禁掉bindtap事件,阻止点击,它是css3的一个属性，指定在什么情况下元素可以成为鼠标事件的target（包括鼠标的样式）*/
}

如下是 js 逻辑代码

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

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

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

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

    handleInput(event) {
      console.log(event);
      this.setData({
        count: event.detail.value,
      });
      this.triggerEvent('changeCount', event.detail.value);
    },
  },
});

自定义组件定义好了,那么如何使用呢

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

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

{
  "usingComponents": {
    "count":"/components/count/count"
  }
}

注意