微信小程序 input数据动态绑定，并封装为组件

官方提供的案例：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

在官方提供的案例中只有一个简单的时间，并没有去封装为一个组件，在时间项目开发中我们常常要把共有的部分抽象出来，封装为一个组件，下面提供一个实现

注意：在微信小程序中默认不是动态绑定的，需要我们对不同的输入框调用不用的方法，实现对不同的数据动态绑定，因此我们封装组件的时候必须考虑到不同的方法

在template.wxml(没有请创建)中

<template name='settingItem'>
     <view class='settingItem'>
          <text class='caption'>{{caption}}</text>
          <view class="page-section" wx:if='{{isInput}}'>
               <view class="weui-cells weui-cells_after-title">
                    <view class="weui-cell weui-cell_input">
                    //在这里获取，传入的方法名称
                         <input class="weui-input"  bindinput="{{inputListener}}" placeholder="{{hint}}" />
                    </view>
               </view>
          </view>
          <text wx:else class='value'>{{value}}</text>
          <image wx:if='{{needIcon}}' src='../../res/images/ic_right_arrow.png' mode='widthFix' class='icon' />
     </view>
</template>

在使用的父组件中

<import src='template.wxml' />
  <template is='settingItem'
               data="{{caption:'入住人 ',value:userName,inputListener:'nameListener',needIcon:false,isInput:true,hint:'请输入姓名',inputType:'text'}}" />
   <template is='settingItem'
               data="{{caption:'手机号码 ',value:userPhone,inputListener:'phoneListener',needIcon:false,isInput:true,hint:'请输入手机号码',inputType:'number'}}" />

注意：{{}}要写在外面，里面使用‘’代表字符创，没有引号代表变量

在js文件中

     nameListener: function (e) {
          this.setData({
               userName: e.detail.value
          })
     },
     phoneListener: function (e) {
          this.setData({
               userPhone: e.detail.value
          })
     },