2つの入力ボックスと1つの固定電話フィールドを確認します

vueでは、固定電話の前後の2つの入力ボックスを確認します。親ページで確認できるフィールドは1つだけです。

解決策：コンポーネントの値を渡すことを選択できます

入力コンポーネントによってデフォルトで受け入れられる値は、—————— props：{value}と呼ばれます。

子コンポーネントは$ emitメソッドを使用して、値を親コンポーネントに渡します———————入力。1つの値に分割された2つの値は、デフォルトで親コンポーネントの値「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>