【小程序】自定义组件及组件间传递数据

在小程序中，类似<view>、<button>、<text>这些标签，统称为组件，丰富的组件构成了页面文件wxml。

小程序自基础库版本 1.6.3起支持自定义组件，开发者可以将某个功能模块抽象成一个自定义组件，以便在不同的页面中重复使用。

自定义组件和页面一样，都有着wxml、js、json、wxss四个文件。

 1.自定义组件

• 自定义组件

"component": true,

自定义组件要先将组件所在页面的json文件中的【component】字段设为true

<!--components/component.wxml-->
<!-- 自定义一个名为“comp”的组件 -->
<view class="comp">
  <text>这是组件</text>
  <button>点击</button>
</view>

在【component.wxml】中声明一个名为【comp】的组件

• 注册组件

组件有局部和全局之分，局部组件只能在特定页面使用，而全局组件可以在所有页面使用。

  "usingComponents": {
    "comp":"/components/component"
  }

全局组件在【app.json】文件中的【usingComponents】字段注册，格式为———"组件名" : "组件路径"。

同理，局部组件在页面的json文件中注册。

• 使用组件

<!--pages/home.wxml-->
<!-- 使用自定义组件 -->
<comp></comp>

在【home.wxml】中使用自定义组件

2.组件间传递数据

组件间传递数据是双向的，即父组件→子组件或子组件→父组件。

父组件是调用自定义组件的页面，而子组件是被调用的自定义组件。

• 父组件向子组件传递数据

        父组件发送数据

// pages/home.js
Page({
  data:{
    msg:'父组件的数据'
  }
})

上述是父组件js文件中名为【msg】的字符串

<!--pages/home.wxml-->
<comp msg="{{ msg }}"></comp>

在使用自定义组件时通过插值表达式将数据传递给子组件       

        子组件接收数据

// components/component.js
Component({
  properties: {
    msg:{}
  }
})

子组件在js文件的【properties】字段声明一个用来接收数据的属性【msg】

<!--components/component.wxml-->
<!-- 自定义一个名为“comp”的组件 -->
<view class="comp">
  <text>这是组件</text>
  <button>点击</button>
  <text>{{ msg }}</text>
</view>

在<text>标签中使用插值表达式展示父组件传递过来的数据

• 子组件向父组件传递数据

        父组件接收数据

<!--pages/home.wxml-->
<!-- 使用自定义组件 -->
<comp bind:myEvent="getData"></comp>

使用子组件时绑定触发事件并对其进行监听，触发事件为【myEvent】，监听方法为【getData】

// pages/home.js
Page({
  data:{
    msg:'父组件的数据',
    info:{}
  },

  // 监听触发事件的方法
  getData(e){
    this.setData({
      info:e.detail.info
    })
  }
})

在js中声明一个【info】对象，用来储存子组件传递过来的数据，定义监听方法将传递数据赋值给【info】

        子组件发送数据

// components/component.js
Component({
  data: {
    info:'子组件的数据'
  },

  lifetimes:{
    attached:function(){
      /* triggetEvent()参数：
      1.指定事件名、
      2.detail对象、
      3.事件选项(可选) */
      this.triggerEvent(
        'myEvent',{info:this.data.info}
      )
    }
  }
})

在子组件js中使用【this.triggerEvent()】方法向触发事件【myEvent】的监听方法【getData()】传递数据。

【this.triggerEvent()】有三个参数：

1. 指定事件名
2. 要传递的数据
3. 事件选项（可选）

字段【lifetimes】是组件的生命周期，【attached】代表方法在组件实例进入页面节点树时执行。

3.参考资料：

组件间通信与事件 | 微信开放文档