从子/合作伙伴组件向前移动一个 Vuetify 日历？

Posted 2023-02-23

【中文标题】从子/合作伙伴组件向前移动一个 Vuetify 日历？

【英文标题】：Moving a Vuetify calendar one from forward from a child/partner component?

【发布时间】：2019-08-01 14:40:50

【问题描述】：

Vuetify 日历使用以下导航：

@click="$refs.calendar.prev()" @click="$refs.calendar.next()"

如果您将这些命令与日历放在同一个文件中，这些命令就会起作用。我正在使用 Vuetify 文档中的bottom (last) instance of the calendar，但我想要侧面板（我将其用作更改日志，因为日历将用于更改日记/计划者）。 $refs.calendar 在该组件中不起作用。我尝试传递对子组件的引用，但 $refs 只是以未定义的形式出现。

如何将日历从子组件向前移动一个月？

【参考方案1】：

您可以使用custom events。

在你的父组件中，你调用你的子组件，我称之为CalendarNav。在里面，您将拥有日历导航按钮。您将 2 个事件绑定到它，previousMonth 和 nextMonth。当你的父组件收到prevMonth 或nextMonth 事件时，它会执行传递给它的函数。

<CalendarNav @prevMonth="$refs.calendar.prev()" @nextMonth="$refs.calendar.next()" />

在您的子组件CalendarNav 中，您会在单击按钮时发出事件，如下所示：

<v-btn @click="$emit('nextMonth')">
    Next
    <v-icon
      right
      dark
    >
      keyboard_arrow_right
    </v-icon>
  </v-btn>

和

<v-btn @click="$emit('prevMonth')">
    <v-icon
      dark
      left
    >
      keyboard_arrow_left
    </v-icon>
    Prev
  </v-btn>

VueJS Doc about Custom Events