校验固定电话的2个输入框，一个字段

vue中校验固定电话前后的两个输入框，在父页面只允许校验一个字段，

解决方案：可以选择组件传值

这里面 input组件默认接受的值叫做——————props:{value}

子组件向父组件用$emit方法传值———————input,将分割成的两个值组成一个值默认传给父组件中的那个值“telephone”

父组件中

    <el-col :span="12">
                <el-form-item label="固定电话：" prop="telephone">
                  <telephone-input v-model="addForm.telephone"></telephone-input>
                </el-form-item>
    </el-col>

子组件中

<template>
  <el-row>
    <el-col :span="4">
      <el-input v-model="areaCode"></el-input>
    </el-col>
    <el-col :span="2" class="line">
      <span>-</span>
    </el-col>
    <el-col :span="18">
      <el-input v-model="phoneCode"></el-input>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'telephone-input',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    areaCode: {
      get: function () {
        if (this.value) {
          let numberArr = this.value.split('-')
          if (numberArr.length) {
            return numberArr[0]
          } else {
            return undefined
          }
        }
      },
      set: function (newValue) {
        this.$emit('input', newValue + '-' + this.phoneCode)
      }
    },
    phoneCode: {
      get: function () {
        if (this.value) {
          let numberArr = this.value.split('-')
          if (numberArr.length) {
            return numberArr[1]
          } else {
            return undefined
          }
        }
      },
      set: function (newValue) {
        this.$emit('input', this.areaCode + '-' + newValue)
      }
    }
  },
  methods: {}
}
</script>

<style scoped>
  .line {
    text-align: center;
    line-height: 30px;
  }
</style>