Vuetify 步进器简单组件包装器 v-on="$listeners" 错误

Question

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

所以我想把$attrs,$listeners,$slots.

都传下去

我不想改变任何 behavior/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" 时，此错误消失，但我需要它来传递事件。不是吗？

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

Answer 1

v-model 只是 @input + :value.

的语法糖

来自文档：https://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>

Answer 2

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

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

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

Vuetify 步进器简单组件包装器 v-on="$listeners" 错误

Vuetify stepper simple component wrapper v-on="$listeners" error

javascript

vue.js

vuejs2

vuetify.js