小程序组件化_小程序组件化怎么做-优快云博客

本文详细介绍了微信小程序的组件系统，包括内置组件和第三方组件如Vant UI的使用，以及自定义组件的创建和应用场景。还阐述了小程序中组件间的通信方式，如父传子、子传父以及兄弟组件间通信的实现步骤。此外，文章还讨论了如何让小程序支持npm以及 vant组件的引入流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件是什么

组件：具有完整功能（html-视图,css-样式,js-逻辑），并且独立运行的模块

小程序组件分类

内置组件：小程序内置的组件，直接拿来就可以使用，无需安装
例如： view,text,image,button,swiper,switch…
第三方组件:需要安装，引入，再使用
最好使用就是vant UI
vant ui官方文档

如何让小程序支持npm

生成package.json:npm init -y
安装vant: npm i @vant/weapp -S --production
将 app.json 中的 “style”: “v2” 去除
勾选开发者工具-详情–本地设置-npm模块
选择微信开发者工具-工具-构建npm
使用第三方vant组件
第一步：在app.json或当前页面的json文件中的usingComponents引入
第二步：在wxml页面上引入标签

注意这里小程序vant ui使用那个功能就引入那个功能，不能象vue.js的vant引入一个就都可一使用了

自定义组件

什么是自定义组件
小程序中常常会有一些通用的交互模块，比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到，逻辑也相对独立。然而，用传统的小程序开发方法来实现这样的模块是非常繁琐的。面对这个情况，小程序基础库提供了让开发者自己创建界面组件的特性，称之为“自定义组件”。
使用场景
多个页面用到同样的功能
页面功能很多,很复杂,使用组件来拆分逻辑
自定义组件组成
（1）json文件用于于放置一些最基本的组件配置

（2）wxml 文件组件模版

（3）wxss 文件组件的样式（无法直接使用全局样式，需要通过@import导入）

（4）js 文件组件的 JS 代码，承载组件的主要逻辑

小程序的组件通信

父传子

   在父组件中的子组件标签添加属性，给子组件传递数据
   父组件中 <submit-bar totalMoney="{{totalMoney}}" ></submit-bar>
   子组件接收 ： properties: {
Component({
 ...
  properties: {
    //要接收的属性
    title:{
      //接收的类型
      type:String,
      //接收的默认值
      value:"此处有一个标题"
    },
    content:{
      type:String,
      value:"此处是内容"
    }
  },
  ....
})
   }

子传父

   （1）在父组件的子组件标签自定义事件，传给子组件
   <submit-bar  bind:submit="submit" ></submit-bar>
   （2）子组件用this.triggerEvent('父组件自定义事件', '要传递的参数')，触        发父组件传过来的自定义事件
     this.triggerEvent("submit", 'Hello Grayly')
    （3） 父组件自定义事件绑定的函数就会执行，同时接受子组件传过来的数据
         submit(event) {
          console.log(event);
      },

兄弟组件之间的通信

A兄弟,B兄弟,C（父组件）三个组件
A–>C—>B
组件A 通过子传父将数据传给父组件 C
父组件C 通过父传子的方法将数据再传给子组件B 这样就完成了微信小程序的兄弟组件通信

A：父组件：cate

  <A bind:A="myA"/>
  <B mynum="{{ num }}"/>
  
  
B传给C兄弟

B传A:

wxml:
<view>
  <text>我是A组件-{{ num }}</text>
  <view><button size="mini" bindtap="goToParent">把A的数据发送给B组件</button></view>
</view>
JS:
  goToParent() {
      this.triggerEvent('A',this.data.num)
    }
  }
  A传C  
  <A bind:A="myA"/>
  
    myA(e) {
    this.setData({
      num:e.detail
    })
  }
  
 C再将A接的值再接收:
 
 //父级代码：cate
   <B mynum="{{ num }}"/>
 C内部的代码：
Component({
  properties: {
    mynum:{
      type:Number,
      value:99
    }
  },
})

<view>
  <text>我是B组件--{{ mynum }}</text>
</view>
这样就完成了 兄弟组建的通信 简单来说 组件A 通过子传父 将数据传给父组件 C 
 父组件C 通过父传子的方法将数据再传给子组件B 这样就完成了微信小程序的兄弟组件通信