我有一个第三方输入组件(一个vuetify v-text-field)。
为了验证的原因,我更喜欢将此组件包装在自己的组件中。
我的TextField.vue
<template>
<v-text-field
:label="label"
v-model="text"
@input="onInput"
@blur="onBlur"
:error-messages="this.getErrors(this.validation, this.errors)"
></v-text-field>
</template>
<script>
import VTextField from "vuetify/es5/components/VTextField";
import {vuelidateErrorsMixin} from '~/plugins/common.js';
export default {
name: "TextField",
props: ['label', 'value', 'validation', 'errors'],
mixins: [vuelidateErrorsMixin], //add vuelidate
data: function() {
return {
'text': this.value
}
},
components: {
VTextField
},
methods : {
onInput: function(value) {
this.$emit('input', value);
this.validation.$touch();
},
onBlur: function() {
this.validation.$touch();
}
},
watch: {
value: {
immediate: true,
handler: function (newValue) {
this.text = newValue
}
}
}
}
</script>
被用于另一个组件中的内容
<template>
...
<TextField v-model="personal.email" label="Email"
:validation="$v.personal.email" :errors="[]"/>
...
</template>
<script>
...imports etc.
export default { ...
data: function() {
return {
personal: {
email: '',
name: ''
}
}
},
components: [ TextField ]
}
</script>
这个方法可以正常工作,但我想知道是否有更加简洁的方法来避免重复整个v-model的过程。现在我的数据在两个地方重复,还有很多额外(不必要的)事件处理... 我只想直接将响应式数据传递到原始模板中的v-text-field中。我的TextField实际上根本不需要访问那些数据 - 只需被通知文本已更改(通过@input,@blur处理程序完成)。我不希望使用VUEX,因为它自己处理输入/表单时存在问题... 更接近这样的东西...<template>
<v-text-field
:label="label"
v-model="value" //?? SAME AS 'Mine'
@input="onNotify"
@blur="onNotify"
:error-messages="this.getErrors(this.validation, this.errors)"
></v-text-field>
</template>
<script>
import VTextField from "vuetify/es5/components/VTextField";
import {vuelidateErrorsMixin} from '~/plugins/common.js';
export default {
name: "TextField",
props: ['label', 'validation', 'errors'], //NO VALUE HERE as cannot use props...
mixins: [vuelidateErrorsMixin], //add vuelidate
components: {
VTextField
},
methods : {
onNotify: function() {
this.validation.$touch();
}
},
}
</script>
我找不到任何能够做到这一点的东西。
使用props + v-model包装是我所做的。
value
->modelValue
和 event:input
->update:modelValue
。 - Markus Weninger