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

最新推荐文章于 2024-09-16 15:08:31 发布

极乐叔

最新推荐文章于 2024-09-16 15:08:31 发布

阅读量1.3k

点赞数 2

分类专栏：微信小程序，小程序组件文章标签：小程序

本文链接：https://blog.csdn.net/rolan1993/article/details/109379827

版权

本文详细介绍了在微信小程序中如何实现自定义组件以及组件间的通信。通过一个数字加减输入框组件的实例，讲解了自定义组件的创建、使用、属性传递、事件交互以及禁止view的bindtap事件。此外，还探讨了组件通信的多种方式，包括通过属性传递、事件监听、以及通过`selectComponent`获取子组件数据。最后，提到了代码优化技巧，以提高组件的可维护性和效率。

摘要由CSDN通过智能技术生成

前言

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

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

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

实例效果
在这里插入图片描述

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

在小程序中如何自定义组件
在小程序页面中如何使用自定义组件
父(外部)组件如何向子组件传值
子组件如何接受父组件传递过来的值,同时渲染组件
子组件内如何进行事件交互,如何向父组件传递数据,影响父组件定义的数据
另一种方法父组件获取子组件的数据(非triggerEvent方式,即selectComponent)
达到某些条件时,如何禁止view的bindtap事件
数字加减输入框代码的优化

为什么要自定义组件?

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

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

怎么使用自定义组件?

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

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

如下是 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