如何在自定义Vue组件上使用@blur之类的事件？
如何在自定义Vue组件上使用@blur之类的事件？
提问于 2022-08-25 11:47:01
我正在构建一个自定义组件，它的工作方式类似于一个带有验证的输入字段，我无法得到“更改”，@blur.等等，就像它在输入字段上一样。
这是组件的模板：
// callback-date-multiselect.html
<div>
<multiselect
v-if="hasOptions"
v-model="selected"
:options="optionsList"
:name="name"
:searchable="false"
:allow-empty="false"
:maxHeight="1000"
track-by="date"
label="label"
placeholder="Bitte wählen"
key="select"
>
</multiselect>
<input
v-if="!hasOptions"
type="text"
pattern="[0-9]*"
inputmode="numeric"
v-model="selected"
v-input-mask="'date'"
v-suppress-aria-invalid
key="input"
:name="name"
/>
</div>这是在另一个组件中使用的组件：
// example-form.component.html
<callback-date-multiselect
:initial="callbackDateDay"
:name="'callbackDateDay'"
v-model="callbackDateDay"
@blur="v$.callbackDateDay.$touch"
@change="v$.callbackDateDay.$touch">
</callback-date-multiselect>我得到以下错误：
Component emitted event "blur" but it is neither declared in the emits option nor as an "onBlur" prop.回答 1
Stack Overflow用户
发布于 2022-08-25 12:04:32
您使用的是自定义组件，在这种情况下，您必须手动指定@blur应该做什么，这称为通过发射将事件绑定到组件。
因此，您基本上只需要指定@blur将发出一个事件，然后添加以下内容
export default {
..
..
emits: ['event_name'],
methods: {
blurHandler() {
this.$emit('event_name')
},
},
};然后在父组件中调用它并指定它所做的事情。
希望这很简单，也很有帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73486918
复制相关文章
相似问题
腾讯云开发者
