如何删除vue 3中不推荐的$listeners
如何删除vue 3中不推荐的$listeners
提问于 2022-01-24 12:54:01
在从vue 2到vue 3的迁移中，我收到了一些编译警告。在组件中不推荐使用$listeners是其中之一。通过删除$attrs，我检查了使用$listeners的正式文档。我是vue 3的新手。所以，我无法理解如何处理那些与侦听器相关的警告。
下面是代码片段：第1例： Component 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例：组件2
<template>
<custom-button v-bind="buttonProps"
v-on="$listeners"
:class="buttonClass"
@click="tooggle"></custom-button>
</template>如何处理这两起案件？
回答 2
Stack Overflow用户
发布于 2022-01-24 14:42:42
在Vue 3中，$listeners迁移到$attrs，您可以使用v-bind="$attrs"。这是docs的一篇文章
附加文档：https://vuejs.org/guide/components/attrs.html#nested-component-inheritance
Stack Overflow用户
发布于 2022-07-20 05:54:21
在Vue 2中，可以使用v-on="$listeners"绑定所有事件侦听器。
在Vue 3中，根据文档，如果您想对一个非根元素应用回退属性，则必须使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70834188
复制相关文章
相似问题
腾讯云开发者
