小程序自定义组件使用详解

最新推荐文章于 2025-02-27 16:28:43 发布

原创

最新推荐文章于 2025-02-27 16:28:43 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序组件

本文介绍了如何在小程序中创建和使用自定义组件，特别是以select下拉框为例，详细讲解了组件的创建过程，包括在components目录下创建组件文件，如select.js、select.json等，并在需要使用的页面引用组件。同时，文章还讨论了组件间的传值方法，参照官方文档，帮助读者理解并实现自定义组件的功能。

之前写过怎么使用小程序的组件，Weui，今天总结一下，怎么使用自定义组件，以 select 下拉框为例

首先，自定义组件，肯定要有组件，我们先在 components 里面新建 select 文件夹（如果是小程序原生的，里面文件应该会自动生成，我这里用的是 mpvue ，里面的文件 select.js , select.json , select.wxml , select.wxss 是要自己添加的）

select.wxml

<view class='com-selectBox'>
  <view class='com-sContent' bindtap='selectToggle'>
    <view class='com-sTxt'>{
  
  {nowText}}</view>
    <image class="" src="../../../../../static/images/user.png" class='com-sImg' animation="{
  
  {animationData}}"></image>
  </view>
  <view class='com-sList' wx:if="{
  
  {selectShow}}">
    <view wx:for="{
  
  {propArray}}" data-index="{