微信小程序笔记 表单用自定义的input组件（把input写入组件中）

参考了这篇文章。

示例：
一、自定义组件：myInput
myInput.wxml：

<input placeholder="{{myPlaceHolder}}" bindinput="getInputValue"></input>

myInput.wxss：

input{
  border: 1px solid #000;
}

myInput.js：

Component({
  behaviors: ['wx://form-field'], //必须要写
  properties: {
    myPlaceHolder:{
      type:String,
      value:""
    }
  },

  data: {

  },

  methods: {
    getInputValue: function(res) { //必须要写
      this.setData({
        value: res.detail.value
      })
    }
  }
})

二、表单使用自定义组件myInput
wxml：

<form bindsubmit="submitData">
  <myInput name="buyerID" myPlaceHolder="请输入买家id"></myInput>
  <myInput name="buyerPhone" myPlaceHolder="请输入买家电话"></myInput>
  <myInput name="buyerName" myPlaceHolder="请输入买家名称"></myInput>

  <button type="primary" form-type="submit">提交数据</button>
  <button type="primary" form-type="reset">清空</button>
</form>

要注意，不用在自定义组件myInput里定义name属性，直接在使用myInput的时候添加上name属性。

wxss：

page{
  padding: 10rpx;
  box-sizing: border-box;
}

js：

const db = wx.cloud.database()

Page({
  data: {
    
  },

  // 提交数据
  submitData:function(res){
    console.log(res)
  }
})

json：

{
  "usingComponents": {
    "myInput":"../../components/myInput/myInput"
  }
}

前端效果图：

提交数据：

后端运行结果：

返回的res.detail.value中就有刚刚提交的数据了。

但如果表单用自定义的button组件（把button写入组件中），好像不能提交：来源