Есть основной компонент-обертка и компоненты-начинки для routable-вкладок
<template>
<f7-page :page-content="false">
<f7-navbar title="…">
<f7-nav-right>
<div class="online-indicator badge"></div>
</f7-nav-right>
</f7-navbar>
<f7-toolbar tabbar bottom labels>
<f7-link
tab-link
v-for="tab in $options.tabs"
:href="tab.path"
:route-tab-id="tab.id"
:icon="tab.icon"
:text="translate(tab.title)"
></f7-link>
</f7-toolbar>
<f7-tabs routable swipeable>
<f7-tab class="page-content ptr-content" v-for="tab in $options.tabs" :id="tab.id"></f7-tab>
</f7-tabs>
</f7-page>
</template>
Необходимо организовать на вкладках infinite-scroll, pull-refresh и передачу родительскому компоненту кастомного события.
Видел на форуме топ, но он остался без ответа. Проблема в чем: я так понимаю всю атрибутику pull-refresh и infinite-scroll нужно рисовать на f7-tab, но в этом случае обработчик нужно указывать в текущем, родительском компоненте, а он для каждой вкладки свой и находится в логике каждого из компонентов-вкладок. Как мне пробрасывать событие от родительского компонента дочернему?
И второй момент обратный. В каждом компоненте-вкладке, возникает кастомное событие, которое нужно отловить сверху, в родительском компоненте, пробовал описывать через поле emits, выбрасывать через $emit и ловить в родителе через @ - не работает (делал так с обычными компонетами, и работало, но здесь видимо по другому. f7-tab отображает дочерний компонент, и видимо не проксирует его события).