Question

我有大量重复的表单输入，我想将其抽象为一个组件。我想做以下事情：

<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中用于将表单输入抽象为组件并将保留关键字作为道具传递的简单解决方案是什么？

Answer 1

如果您想将v-model从父级传递给子级，只需使用value作为道具并发出input事件，如VueJS documentation所示：

<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">

我还没有测试过这段代码。

将保留名称作为道具传递

1 个答案: