小程序自定义组件属性及方法

组件html

<view class="input" >
<text class="name">{{name}}</text>
<input bindblur="inputBlur"></input>
<text class="line">|</text>
<text class="words">{{words}}</text>
</view>

组件js

Component({
  properties: {
    // 这里定义了name属性，属性值可以在组件使用时指定
    name: {
      type: String,
      value: '金额',
    },
    words: {
      type: String,
      value: '元',
    }
  },
  data: {
    // 这里是一些组件内部数据
  },
  methods: {
    // 这里是一个自定义方法
    inputBlur(e){
      // 通过trigerEvent方法传递参数e
      this.triggerEvent('formBlur',e)
    }
  }
})

组件json

{
  "component": true
}

页面html

//properties 直接写在行间就可以使用
//methods 需要通过bind: 绑定；其中formBlur为triggerEvent传递的第一个参数，= formBlurInput为当前页面方法
<formItem name="姓名"  bind:formBlur="formBlurInput"></formItem>

页面js

const app = getApp()

Page({
  data: {    
  },
  formBlurInput: function(e) {
    //e为组件传递过来的值
  }

})

页面json

"usingComponents": {
    "formItem":"/components/formItem/formItem"
  }