步骤简单组件包装v-on="$listeners“错误

Question

我正在尝试为Vuetify组件创建一个组件包装器。我的目标是简单地创建一个包装器，这样我就可以应用一些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"时，这个错误就消失了，但是我需要它来传递事件。我不是吗？

对于一个简单的组件包装器的任何帮助或建议都是非常感谢的。

Answer 1

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

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

这指的是文档中的自定义组件v-模型。

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