Перемещение календаря Vuetify вперед от дочернего / партнерского компонента? - PullRequest
Новая
       21

Перемещение календаря Vuetify вперед от дочернего / партнерского компонента?

2 голосов
/ 11 марта 2019

Календарь Vuetify использует следующее для навигации:

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

Эти команды работают, если они находятся в том же файле, что и календарь.Я использую нижний (последний) экземпляр календаря из документов Vuetify, но мне нужна боковая панель (которую я использую в качестве журнала изменений, поскольку календарь будет использоваться для изменения дневника)./ планировщик).$refs.calendar не работает в этом компоненте.Я попытался передать ссылку на дочерний компонент, но $refs просто выглядит как неопределенное.

Как я могу переместить календарь на один месяц вперед от дочернего компонента?

1 Ответ

2 голосов
/ 11 марта 2019

Вы можете использовать пользовательских событий .

В родительском компоненте вы называете свой дочерний компонент, я назвал его 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 о пользовательских событиях

...