时间戳

首页 > 解决方案 > 是否可以在自定义组件中使用 @keyup 来定位输入元素？

javascript - 是否可以在自定义组件中使用 @keyup 来定位输入元素？

问题描述

嗨，我想使用 v-on:keyup 来定位自定义组件内的输入元素，但显然我没有运气

 <TextField label="Some Text" @keyup="updateLen" v-model="text"  />

//javascript
computed: {
updatedLen(event) {
  let target = event.value.length;

  console.log('target', target)
},
}

这是自定义组件src代码

<template>
<div>
<v-text-field>@keyup="keyUp"</v-text-field>
</div>
</template>

<script>
keyUp(event)
    {
      
      this.content =   this.content.replace(/([^a-z0-9-]+)/gi, '');
        

      this.$emit('input', this.content);
     
    },
</script>

标签： javascriptvue.js

解决方案

在自定义组件上，像这样的侦听@myEvent器将侦听使用this.$emit. 所以在这里，@keyup正在监听自定义事件this.$emit('keyup')（它不是keyup来自 DOM 的本机事件。）

在这里，您的TextField组件永远不会发出keyup事件，因此您的侦听器将永远不会被触发。即使您内部有一个触发同名事件的组件，该事件也不会分派给父级，而只会分派给它的直接父级（即使用它的组件）。

你必须做什么，它会在收听它的同时再次发出事件。

<TextField label="Some Text" @keyup="updateLen" v-model="text"  />

<template>
  <div>
    <v-text-field @keyup="keyUp"></v-text-field>
  </div>
</template>

<script>
  keyUp(event) {
     this.content = this.content.replace(/([^a-z0-9-]+)/gi, '');
     this.$emit('input', this.content); // Updates `v-model`
     this.$emit('keyup', event); // Triggers your `@keyup` listener
  },
</script>

如果您的TextField组件只是一个包装器，v-text-field并且您希望它具有完全相同的道具/侦听器，您可以禁用属性的自动继承并自行设置。

<template>
  <div>
    <v-text-field v-on="$listeners" v-bind="$attrs">
  </div>
</template>

<script>
export default {
   inheritAttrs: false, // The root element won't inherit all static attrs
}
</script>

推荐阅读