在Vue.js中组合输入组件的方法

<template>
  <div>
    <label>{{ label }}</label>
    <input v-model="value" :type="type" :placeholder="placeholder">
    <span v-if="error" class="error">{{ error }}</span>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
    value: [String, Number],
    type: {
      type: String,
      default: 'text'
    },
    placeholder: String,
    error: String
  }
}
</script>

<template>
  <div>
    <InputField label="用户名" v-model="username" />
    <InputField label="密码" v-model="password" type="password" />
  </div>
</template>

<script>
import InputField from './InputField.vue'

export default {
  components: {
    InputField
  },
  data() {
    return {
      username: '',
      password: ''
    }
  }
}
</script>