微信小程序学习笔记(自定义组件部分)

陈百川

已于 2022-03-25 15:00:02 修改

阅读量267

点赞数

文章标签：前端微信小程序小程序

于 2022-03-25 14:59:58 首次发布

本文链接：https://blog.csdn.net/weixin_43889695/article/details/113444907

版权

自定义组件可以分为三个步骤

创建组件
声明组件
引用组件
创建组件
需要在项目根目录创建一个component文件夹来存放自定义组件

声明组件
我个人理解自定义组件的目的就是当有需求类似的页面时可以快速开发，所以应该是一个类似于jQuery的代码库。如果需要引用，则需要在页面的.json文件中声明引用，此处我做了一个demo10来练习自定义组件的创建与引用，所以是在page10.json文件的usingComponent属性中以键值对的方式引用自定义组件，过程如图
引用组件
具体引用情况如下

如图，只需要键入Tabs这个标签，就可以在页面中输出自定义组件中已经写好的内容，结果如下

自定义组件代码如下
HTML部分

<view class="tabs">
  <view class="tabs_title">
    <view wx:for="{{tabs}}" wx:key="id" wx:for-item="tabs" class="tabs_item {{tabs.isActive?'active':''}}">
      {{tabs.name}}
    </view>
  </view>
</view>

JS部分

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },
  /**
   * 组件的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"推荐",
        isActive:true
      },
      {
        id:1,
        name:"关注",
        isActive:false
      },
      {
        id:2,
        name:"原创",
        isActive:false
      },
      {
        id:3,
        name:"同城",
        isActive:false
      }
    ]
  },

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

  }
})

经过学习自定义组件，确实让我感受到了快速开发的魅力。

2-3日补充后续

父组件如果需要传递数据给子组件，是通过属性键值对的方式传递，例如

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
  <block wx:if="{{tabs[0].isActive}}">推荐页面</block>
  <block wx:elif="{{tabs[1].isActive}}">关注页面</block>
  <block wx:elif="{{tabs[2].isActive}}">原创页面</block>
  <block wx:else="{{tabs[3].isActive}}">同城页面</block>
</Tabs>

该代码段中的Tabs标签中的{{tabs}}就是需要传递的数。

子组件将接收到的父组件传递的数据存放在.js文件中的properties属性中，在该属性中，存放方式类似于data，但是在接收到的数据内需要声明数据的类型

properties: {
    tabs:{
      type:Array,
      value:[]
    },
    list:{
      type:Array,
      value:[]
    }
  },

tabs和list的类型是一个数组类型。value，即默认值，为空。
此时从父组件传递过来以后，处理数据的方式与处理data中数据的方式类似。最后，用this.triggerEvent("itemChange",{index});将处理好的数据发送给父组件，再进行渲染，一个从父到子再从子到父的闭环就形成了