vant2，分割长表单（van-from）。

最近遇到这样一个问题，需要用户提交一个长表单。由于表单太长，全写到一个页面太混乱。就想把长表单分割成多个组件。

类似于这样，在父组件有一个按钮控制提交。

数据子组件传递给父组件比较简单。但是验证规则就比较麻烦。 需要通过ref去拿。

用一个promise.all包裹，如果其中一个验证不通过就会抛出异常，异常中有一个数组，是错误信息。代码如下： 父组件

<template>
  <div>
  <div class="hello">
    <formOne ref="formOne"></formOne>
    <formTwo ref="formTwo"></formTwo>
  </div>
  <div style="margin: 16px;" @click="onSubmitAll">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
  </div>
</template>

<script>
import formOne from "./formOne"
import formTwo from "./formTwo"
export default {
  name: 'HelloWorld',
  methods:{
    async onSubmitAll(){
      try {
        await Promise.all(
            [this.$refs.formOne.$refs.myForm.validate(),
              this.$refs.formTwo.$refs.myFrom.validate()]
        )
        console.log("验证成功")
      }catch (e){
        console.log(e)
      }

    }
  },
  components:{
    formOne,
    formTwo
  },
  data(){
    return {
    }
  },
  mounted() {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

子组件1

<template>
  <van-form ref="myForm">
    <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写密码' }]"
    />
    <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
    />
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
  </van-form>
</template>

<script>
export default {
  name: "formOne",
  data(){
    return {
      username: '',
      password: '',
    }
  },
  methods:{
      handleSave(){
       //console.log(this.$refs.myForm)
      //console.log("handleSave");
        console.log(this.$refs.myForm.validate().then(()=>{
          console.log("成功")
        }).catch(()=>{
          console.log("失败")
        }))


    },
      onSubmit(){
      console.log("验证成功One")
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>

子组件2

<template>
  <van-form ref="myFrom">
    <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
    />
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
  </van-form>
</template>

<script>
export default {
  name: "formTwo",
  data(){
    return{
      username: '',
      password: '',
    }
  },
}
</script>

<style scoped>

</style>

大概就是这样。