Vuetify stepper 简单组件包装器 v-on="$listeners" 错误答案

【问题标题】：Vuetify stepper simple component wrapper v-on="$listeners" errorVuetify stepper 简单组件包装器 v-on="$listeners" 错误
【发布时间】：2022-07-15 09:13:05
【问题描述】：

我正在尝试为 Vuetify Stepper 组件创建一个组件包装器。我的目标是简单地创建一个包装器，以便我可以应用一些 CSS 覆盖。

所以我想把所有的$attrs、$listeners、$slots都传下去。

我不想改变任何行为/js。

这是我的my-stepper.vue：

<template>
  <v-stepper v-bind="$attrs" v-on="$listeners">
    <slot></slot>
  </v-stepper>
</template>

<script>
export default {
  name: "my-stepper",
  inheritAttrs: false,
};
</script>

<style lang="scss">
// Fix issue with the vertical stepper component in vuetify
.v-stepper.v-stepper--vertical .v-stepper__content.active > .v-stepper__wrapper {
  height: auto !important; // allow the active step to have automatic height (if child change)
  padding: 4px; // fix an overflow issue
}
</style>

我像这样使用这个组件：

<my-stepper vertical v-model="currentStepNumber" elevation="0">...</my-stepper>

但是现在，当我使用 my-stepper 时，我在 Chrome 中收到以下错误：

[Vuetify] [BREAKING] '@input' has been removed, use '@change' instead. For more information, see the upgrade guide https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide.

当我删除 v-on="$listeners" 时，此错误消失，但我需要它来传递事件。不是吗？

感谢任何有关简单组件包装器的帮助或建议。

【问题讨论】：

您没有显示my-stepper 的使用方式。也许您在上面添加了@input，然后通过$listeners 传递给v-stepper？
@doesnotmatter 我更新了问题以添加我如何使用my-stepper。我有一个v-model。
这解释了为什么您会收到 @input 事件。 v-model 只是 @input + :value 的语法糖。文档：vuejs.org/v2/guide/components.html#Using-v-model-on-Components

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

我找到了解决问题的有效方法。在我的包装器组件中，我需要在脚本部分添加一个model 对象来指定event 名称（从默认为input 到change）：

export default {
  name: "vertical-stepper",
  inheritAttrs: false,
  model: {
    prop: "value",
    event: "change",
  },
};
</script>

这是指文档中的Customizing the Component v-model。

【讨论】：

【解决方案2】：

v-model 只是@input + :value 的语法糖。

来自文档：https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

<input v-model="searchText">

做同样的事情：

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

【讨论】：

将v-model="currentStepNumber 更改为:value="currentStepNumber" @change="currentStepNumber = $event" 确实解决了我的问题。但这很奇怪v-stepper 通过v-on="$listeners" 接受v-model 而不是@input..
我可以在v-stepper 上使用v-model，所以我也想在my-stepper 上使用它。
如果您使用的是 Vuetify 2，那么您无能为力。它已经说这是一个BREAKING 更改，并请您参考升级指南。我不确定你为什么说它有效，因为它显然不在 Vuetify v2 代码库中。
我现在找到了解决方案。感谢您帮助我指出v-model 语法糖。