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

9fkzdhlc 于 2023-05-07 发布在 Vue.js

关注(0)|答案(3)|浏览(390)

在从vue 2迁移到vue 3的过程中，我收到了一些编译警告。组件中$listeners的弃用就是这些警告之一。我已经检查了官方文档，通过删除$listeners来使用$attrs。我是Vue 3的新手。因此，无法理解如何处理与侦听器相关的警告。
下面是代码片段：**第1种情况：**组件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>

如何处理这两种情况？

vue.js

来源：https://stackoverflow.com/questions/70834188/how-to-remove-deprecated-listeners-in-vue-3

3条答案

按热度按时间

bihw5rsg1#

在Vue 3中，$listeners移动到$attrs，您可以使用v-bind="$attrs"。这里有一篇来自docs的文章
其他文件：https://vuejs.org/guide/components/attrs.html#nested-component-inheritance

赞(0）回复(0）举报 2023-05-07

dl5txlt92#

在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>

赞(0）回复(0）举报 2023-05-07

xa9qqrwz3#

这个问题已经以不同的形式被问过几次了，但我还没有看到任何干净的代码示例。下面的例子展示了如何使用v3 $attrs将事件冒泡到父母和祖父母等，就像我们在v2中使用$listeners一样：

// Parent.vue
<template>
  <div>
    <Child v-bind="$attrs" @grandchild-clicked="grandchildClicked" />
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child,
  },
  methods:{
    grandchildClicked(){
      console.log("Grandchild clicked!");
    }
  }
}
</script>

// 
// Child.vue
//
<template>
  <div>
    <Grandchild v-bind="$attrs" />
  </div>
</template>

<script>
import Grandchild from './Grandchild.vue'

export default {
  components: {
    Grandchild,
  },
}
</script>

//
// Grandchild.vue
//
<template>
  <button @click="$emit('grandchild-clicked')">Click me!</button>
</template>

<script>
export default {
   ...
}
</script>

赞(0）回复(0）举报 2023-05-07

我来回答

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

3条答案

相关问题

热门标签

最新问答