Javascript 将保留名称作为道具传递

我有大量重复的表单输入，我想将它们抽象成一个组件。我想做以下工作：

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

由于很多原因，这显然是失败的

---

在

Vue.js

中，将表单输入抽象为组件并将保留关键字作为道具传递的简单解决方案是什么？

如果要将v-model从父级传递给子级，只需将

值

作为道具并发出

输入

事件，如图所示：

{{inputTitle}
失败
导出默认值{
道具：['inputTitle'，'value'，'name'，'type']，
计算：{
我的价值：{
设置：函数（newVal）{
此.$emit（'input'，newVal）；
},
get:function（）{
返回此.value；
}
}
},
方法：{
onblur：函数（事件）{
此。$emit（'blur'，事件）；
}
}
}

您在父级中使用的组件如下所示：

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

---

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

为什么需要使用保留字？很糟糕practice@Brennan编辑。我希望能够从父级传递一个将分配给例如v-model的值。如果不使用保留关键字，我还能如何实现这一点？

v-bind

不适合您的需要？我还建议使用插槽和mixin。@AmreshVenugopal是否愿意演示一个示例？

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

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