vue.js 如果似乎没有任何东西显式地使用输入事件,那么发出输入事件会做什么?

lf5gs5x2  于 2023-06-06  发布在  Vue.js
关注(0)|答案(1)|浏览(139)

我们有一个名为FilterPanel的Vuetify 3组件;简化版本如下:

<template>
  <div>
    <v-container>
      <v-row>
        <v-col cols="3">
          <v-select v-model="field" :items="fields" :menu-props="{ auto: true }">
            <v-field />
          </v-select>
        </v-col>
        <v-col>
          <v-text-field v-model="text" :type="(formats && formats[field]) || 'text'" @keyup.enter="add" />
        </v-col>
        <v-col cols="2">
          <v-btn @click="add()">
            Add Filter
            <v-icon end theme="dark"> mdi-filter-plus </v-icon>
          </v-btn>
        </v-col>
      </v-row>
    </v-container>
    <v-chip>
      ... removed for brevity
    </v-chip>
  </div>
</template>

Vuetify 2版本与此类似:

<template>
  <div>
    <v-text-field v-model="text" :type="(formats && formats[field]) || 'text'" @keyup.enter="add">
      <v-select slot="prepend-inner" v-model="field" :items="fields" menu-props="auto" />
      <v-btn slot="append" @click="add()" >
        Add Filter
        <v-icon right dark>mdi-filter-plus</v-icon>
      </v-btn>
    </v-text-field>
    <v-chip>
      ... removed for brevity
    </v-chip>
  </div>
</template>

稍后在文件中(在<scripts>中),在导出对象的各种methods中有以下行:
this.$emit('input', { ...this.value, ...qFields })
this.$emit('input', { ...this.value, [this.field]: this.text })
this.$emit('input', omit(this.value, key))
在Vuetify 2版本中,this.value基本上等同于{ [this.field]: this.text }(除了w/ getters和setters)。我不确定是因为重新组织的代码还是因为Vuetify的更改,但this.value现在似乎未定义。
这些发射到底是为了什么?在我们的代码库中没有看到任何@input,我查看了Vuetify树中的各种组件,也没有明确提到input事件。
最终,我想弄清楚的是我是否应该:
1.只要删除发射
1.做一些有趣的事情来重建this.value(例如this.$emit('input', { ...{ [this.field]: this.text }, ...qFields })
1.根据Vuetify 3中的一些更改更改这些更改没有在迁移指南中?我注意到了@input event has been replaced by @update:model-value on components that support v-model usage.,但我不确定具体需要做什么,如果这是相关的-改变第一个发射参数,但第二个参数呢?
谢谢你!

ruarlubt

ruarlubt1#

我的猜测是,您没有看到任何@input事件,因为该组件与v-model一起使用。
在Vue 2中,v-model是绑定到prop :value并监听事件@input的简写。在Vue 3中,这已经改变为设置prop :modelValue并监听事件@update:modelValue。我认为这就是您需要更改的内容-将value重命名为modelValue,并发出update:modelValue而不是input事件。
添加一些细节,看起来这是一个自定义组件,允许从许多属性中选择,然后在this.value对象中设置相应的值。我认为它还允许将几个属性覆盖为预设值,并可能完全删除一个属性。
这是用户为选定字段输入数据时发出的:

this.$emit('input', { ...this.value, [this.field]: this.text })

它创建了一个新对象,包含输入prop :value中的所有内容,除了this.field中给出的prop被更改为this.text中的值。
这是当多个属性被覆盖时发出的:

this.$emit('input', { ...this.value, ...qFields })

它创建了一个新对象,包含输入prop :value中的所有内容,但qFields中的所有键都被添加到输出中,覆盖了任何已经存在的键。
最后,这将发出:value,但删除了一个属性:

this.$emit('input', omit(this.value, key))

我显然只是猜测,如果不知道qFieldsomit()key是什么,以及如何使用组件,就不可能说出来。让我知道我有多接近,更重要的是,如果这没有帮助,请添加更多信息。

相关问题