小程序 - 组件

详情参考微信官方文档 - 基础组件

组件化开发，将项目中多次用到的功能模块单独做成一个组件，这样有利于代码复用、也便于修改维护。

小程序也支持组件化开发，使用组件常见的操作有：向组件传值、调用组件中的方法、组件向上级传值，组件触发上级中的方法。

生成组件文件

通常，我会建立一个名为component的文件夹，用来存放组件。右键component文件夹，选择“新建Component”

输入组件名称后，会自动生成以下文件

使用组件

例如，我在pages/page1页面中，如何使用component/myComp组件

需要打开page1下的page1.json文件进行组件配置，如下图所示

扫描二维码关注公众号，回复： 4707791 查看本文章

page1.json代码如下：

{
  "navigationBarTitleText": "page1",
  "usingComponents": {
    "mycomp": "../../component/myComp/myComp"
  }
}

myComp.wxml文件代码

<view>我是子组件</view>

在page1.wxml中使用mycomp组件

<view>
  <view>我是父组件</view>
  <mycomp></mycomp>
</view>

编译之后看到的效果

向组件传值

page1.wxml文件代码如下：

<view>
  <view>我是父组件</view>
  <mycomp pass-data="1"></mycomp>
</view>

属性需要用连接符 - 连接：pass-data；在myComp.js中的properties属性中接收（接收时，需要转化为驼峰命名法）

type表示接收的数据类型（String、Object、Array等），value表示默认值

组件中通过this.data.passData获取上级传递的值

调用组件中的方法

在myComp.js中新增自定义sonMethod()方法

在page1.wxml中绑定callSonMethod()方法，用来触发组件事件，并为子组件赋id值

<view>
  <view catchtap="callSonMethod">我是父组件</view>
  <mycomp id="mycomp" pass-data="1"></mycomp>
</view>

在page1.js中，声明callSonMethod()方法

callSonMethod () {
  console.log("我是父组件的方法，即将调用子组件中的方法");

  let mycomp = this.selectComponent("#mycomp");
  
  // 调用子组件的方法
  mycomp.sonMethod();
},

触发callSonMethod()方法，控制台打印内容如下

除了可以调用组件的方法，还可以修改组件properties中的属性

let mycomp = this.selectComponent("#mycomp");

// 设置组件properties中passData的值
mycomp.setData({
  passData: 2
});

组件触发上级的方法，向上级传值

在page1.wxml中，需要绑定组件将触发的事件，以及事件触发的方法

<view>
  <view catchtap="callSonMethod">我是父组件</view>
  <mycomp id="mycomp" pass-data="1" bind:fm="fatherMethod"></mycomp>
</view>

page1.js中fatherMethod()代码：

fatherMethod (data) {
  console.log("我是父组件的方法，由子组件触发");
  console.log("我是父组件的方法，接收到子组件传递的值为", data);
},

fm为组件触发的事件，fatherMethod()为page1.js声明的事件

myComp.wxml代码：

<view catchtap="sonMethod">我是子组件</view>

myComp.js代码：

sonMethod () {
  let data = {
    'id': 1,
    'name': 'root'
  };

  this.triggerEvent('fm', data);
},

组件通过tiggerEvent事件，触发page1.wxml中绑定在fm中的fatherMethod(data)方法，通过参数data，获取组件传递的值，控制台打印结果如下：

可以看到，传递的值在data.detail中