自定义组件模糊

Question

我有一个自定义组件，它基本上是一个带有一些样式的输入。我想在用户关注组件时发出警报。我添加了@blur 和tabindex，但它仍然没有提醒任何东西。我的代码有什么问题？自定义组件在模糊时不会发出任何东西

<template>
  <custom-component v-model="email" @blur="showSomething" tabindex="0"/>
</template>

<script>
export default{
 data(){
  return{
    email
  };
 },
 methods{
  showSomething(){
    alert('yes')
 }
</script>

Answer 1

由于它是一个自定义组件，您需要使用Vue's $emit() instance method 手动指定它应该发出的事件。

我不知道你的底层组件代码是什么样的，但它可以像添加 $emit('blur', $event) 到你输入的模糊处理程序一样简单：

<input v-model="xxx" ... @blur="$emit('blur', $event)">

（$event is just special Vue syntax 用于在内联语句处理程序中引用原始 DOM 事件。如果您不需要访问它，可以省略它 - 只需调用 $emit 仅使用第一个参数：$emit('blur')。）

如果您已经在该组件中的模糊事件上调用了处理程序/方法，那么您也可以将$emit 添加到该方法中，只是不要忘记this：

methods: {
  ...
  blurHandler() {
    ...
    this.$emit('blur');
    ...
  },
  ...
},

---

有other solutions to this，但显式调用vm.$emit()可能是最直接明了的。