[英]Vue component v-model with input handler
我正在尝试为 Vue.js 中的<input/>
元素制作一个包装器组件。
零件:
<template>
<div>
<input v-bind="$attrs" :value="value" @input="input" />
...
</div>
<template>
Vue.component("my-input", {
inheritAttrs: false,
props: ['value'],
methods: {
input($event): void {
this.$emit("input", $event.target.value)
}
}
})
用法:
<my-input v-model="myModel" />
这似乎工作得很好。 通过发出目标元素值,模型通过输入事件处理程序进行更新。
但是,现在我正在尝试将此组件与一些现有代码一起使用:
<my-input v-model="myModel2" @input="something = $event.target.value" />
这是我遇到$emit("input")
事件的地方。 我收到以下错误:
无法读取未定义的属性“值”
所以,我的$emit
正在发出值,现在现有的@input="something..."
事件处理程序无法正确引用$event
。
如果我将组件的input
法更改为发出$event
而不是$event.target.value
,新代码似乎可以工作,但随后模型没有更新更新为InputEvent而不是实际值。
我不确定我需要做什么。
当您$emit('input')
并且该值与文本输入的v-model
相关联时, <input>
的值将更新为您发出的任何内容。 在$emit('input', $event.target.value)
的情况下,它是您发出的<input>
中文本的值。 这个值将在父级中被截获,就像v-model
一样: <my-input :value="inputValue" @input="inputValue = $event">
这意味着<input
> 的值将绑定回<input>
(实际上不会导致输入中的值发生变化)。 但是,如果您使用$emit('input', $event)
,则v-model
仍将捕获向上传递的任何值并用它更新<input>
的值。 在这种情况下,正如您所说,它将是实际的输入事件对象。
如果您不想使用与模型相关的input
事件,则可以始终使用自定义v-model
事件。 然后你就可以$emit('input', $event)
并且不会影响 v-model 的值,而是从$emit('custom-event', $event.target.value)
尝试
<my-input v-model="myModel2" @input="value => something = value" />
const MyInput = Vue.extend({ name: 'MyInput', template: '#ins', data(){return{valid: true}}, methods: {validate(ev){this.valid = ev.target.value.length < 1 ;this.$listeners.input(ev)}} }) const App = Vue.extend({ components: { MyInput }, template: '#myinput', data(){return{val: 'test'}}, methods: {ins(ev){console.log(ev.target.value)}} }) new Vue({ name: 'root', render: h => h(App) }).$mount("#app");
input {background: red} .valid{background:green !important}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div> <template id="ins"> <input v-bind="$attrs" @input="validate" :class="{valid:valid}"/> </template> <template id="myinput"> <my-input v-model="val" @input="ins" /> </template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.