Передача зарезервированных имен в качестве реквизита

У меня есть тонна повторяющихся входных данных формы, которые я хотел бы абстрактировать в компонент. Я хотел бы сделать следующее:

<InputElement title="someTitle" v-model="someName" @blur="someFunction" name="someName" type="someType">

и у него выплюнуть код, как показано ниже

<template>
  <div>
    <label>Your name</label>
    <input v-model="userame" @blur="validateNotEmpty" name="userame" type="text">
    <p style="color:red" v-if="errors.applicantName === false">Fail</p>

    <label>Phone Number</label>
    <input v-model="phoneNumber" @blur="validateNotEmpty" v-mask="'###-###-####'" name="phoneNumber" />
    <p style="color:red" v-if="errors.phoneNumber === false">Fail</p>

    <label>Your email</label>
    <input v-model="email" @blur="validateEmail" name="email" type="email">
    <p style="color:red" v-if="errors.email === false">Fail</p>
  </div>
</template>

Я создал InputElement.vue

<template>
  <div>
    <label>{{ inputTitle }}</label>
    <input v-model="v-model" @blur="@blur" name="name" type="type">
    <p style="color:red">Fail</p>
  </div>
</template>

<script>
export default {
  props: ['inputTitle', 'v-model', '@blur', 'name', 'type']
}
</script>

И это, очевидно, не удается по многим причинам.

Что такое простое решение Vue.jsдля абстрагирования входных данных форм в компоненты и передачи зарезервированных ключевых слов в качестве реквизита?

1 ответ

  1. Если вы хотите передать v-модель от родителя к потомку, просто используйте valueв качестве опоры и испустите inputсобытие, как показано в документации VueJS :

    <template>
      <div>
        <label>{{ inputTitle }}</label>
        <input v-model="myvalue" @blur="onblur" :name="name" :type="type">
        <p style="color:red">Fail</p>
      </div>
    </template>
    
    <script>
    export default {
      props: ['inputTitle', 'value', 'name', 'type'],
      computed : {
        myvalue : {
            set : function (newVal) {
                this.$emit('input',newVal);
            },
            get : function () {
                return this.value;
            }
        }
      },
      methods : {
        onblur : function (event) {
            this.$emit('blur',event);
        }
      }
    }
    </script>
    

    и вы используете свой компонент в родителе как таковой:

    <InputElement :input-title="someTitle" v-model="someName" @blur="someFunction" :name="someName" :type="someType">
    

    Я еще не тестировал этот код.