时间戳

首页 > 解决方案 > 从子/合作伙伴组件向前移动一个 Vuetify 日历？

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

问题描述

Vuetify 日历使用以下内容进行导航：

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

如果您将这些命令与日历放在同一个文件中，这些命令就会起作用。我正在使用Vuetify 文档中日历的底部（最后一个）实例，但我想要侧面板（我将其用作更改日志，因为日历将用于更改日记/计划者）。$refs.calendar在该组件中不起作用。我尝试将引用传递给子组件，但$refs只是未定义。

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

标签： javascriptvue.jscalendarcomponentsvuetify.js

解决方案

您可以使用自定义事件。

在您的父组件中，您调用您的子组件，我调用它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 文档

推荐阅读