小程序 · 自定义组件

创建自定义组件

在components文件夹右击–>创建文件夹–>右击–>新建component即可 创建一个组件

com.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

com.js

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

使用自定义组件

如果多个地方需要使用到，可以在app.json中加入一下代码，相当于vue的全局组件。

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

单独引用,直接在引用页面的json文件中
父组件home.json （代码同全局引入）

父组件home.wxml

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  // 可以是固定值
  <component-tag-name inner-text="Some text"></component-tag-name>
  // 可以是变量
  <component-tag-name inner-text="{{text}}"></component-tag-name>
</view>

组件间通信

注意：
1.properties中：是写其他页面传过来的变量
2.data中：本页面的变量，属性

父传子（代码同上）

子传父
com.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner" bindtap="customMethod">
  {{innerText}}
</view>

com.js

Component({
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){
      this.triggerEvent('customevent', {}) // 不带参数的
      this.triggerEvent('customevent', {}, { bubbles: true })// 带参数的
    }
  }
})

父组件home.wxml

  <component-tag-name bind:customevent="pageEventListener"></component-tag-name>

父组件home.js

Page({
  data: {
    num:0
  },
  pageEventListener(e){
  }
})

注意：
小程序组件有自己的生命周期

参考
自定义组件 /介绍
自定义组件 /组件间通信与事件