如何删除 vue 3 中已弃用的 $listeners

Question

在从 vue 2 迁移到 vue 3 的过程中，我收到一些编译警告。弃用$listenersin 组件就是这些警告之一。我已经检查了官方文档以$attrs通过删除$listeners. 我是 vue 3 的新手。所以，无法理解如何处理与侦听器相关的那些警告。

这是片段：

第一种情况： 组件 1

    <template>
    <div>
        <input ref="input"
               :value="txtField"
               @input="txtField=$event.target.value"
               :type="inputType"
               :class="inputClass"
               :placeholder="placeholder"
               :disabled="disabled"
               :readonly="readonly"
               :onfocus="disabled&&'this.blur();'"
               :tabindex="tabindex"
               v-on="listenersInput" // here is the method where $listeners used
               @keyup.enter="enterHandler"
               @blur="validateOnEvent"/>
     </div>
</template>

//method 

listenersInput() {
            //var vm = this;
            return Object.assign({}, this.$listeners, {
                input: function(event){ /*vm.$emit('input',event.target.value);*/}
            });
        },

第二种情况： 组件 2

<template>
  <custom-button 
      v-bind="buttonProps"
      v-on="$listeners"
      :class="buttonClass"
      @click="tooggle">
  </custom-button>
</template>

这两种情况该如何处理呢？

Answer 1

在 Vue 3 中$listeners移至$attrs你可以使用v-bind="$attrs". 这是文档中的一篇文章

附加文档：https://vuejs.org/guide/components/attrs.html#nested-component-inheritance

Answer 2

在 Vue 2 中，您可以使用 绑定所有事件侦听器v-on="$listeners"。

在 Vue 3 中，根据文档，如果要将 Fallthrough 属性应用于非根元素，则必须使用v-bind="$attrs"还包括事件侦听器的元素。

所以这个 Vue 2 代码：

<div>
  <my-button v-on="$listeners">click me</my-button>
</div>

在 Vue 3 中看起来像这样：

<div>
  <my-button v-bind="$attrs">click me</my-button>
</div>