Buen día.
Actualmente tengo vistas configuradas de la siguiente forma:
routes.js
const routes = [
{
path: '/',
component: Home,
tabs: [
{
path: '/',
id: 'tab-1',
component: CategoriasGeneral
},
{
path: '/licitacionescategorias',
id: 'tab-1-2',
component: LicitacionesCategorias
},
{
path: '/trabajos/',
id: 'tab-2',
component: Trabajos
},
{
path: '/licitar/',
id: 'tab-3',
component: Licitaciones
},
{
path: 'mensajes/',
id: 'tab-4',
component: Mensajes,
meta:{
autentificado: true
}
},
{
path: '/perfil/',
id: 'tab-6',
component: Perfil
},
{
path: '/entrar/',
id: 'tab-7',
component: Entrar
},
],
beforeEnter: validacion
},
]
export default routes;
Componente Home.vue (Es decír donde accedo a los tabs con sus respectivos componentes)
> <template>
> <f7-page>
> <f7-statusbar></f7-statusbar>
> <f7-toolbar tabbar labels class="toolbar-bottom-md teal">
> <f7-link tab-link route-tab-id="tab-1" v-if="pagina_principal == '1'" href="/">
> <f7-icon icon="fas fa-home" size="20px"></f7-icon>
> <span class="tabbar-label">Home</span>
> </f7-link>
> <f7-link tab-link route-tab-id="tab-1-2" v-else href="/licitacionescategorias">
> <f7-icon icon="fas fa-home" size="20px"></f7-icon>
> <span class="tabbar-label">Home</span>
> </f7-link>
> <f7-link tab-link route-tab-id="tab-2" href="/trabajos/">
> <f7-icon icon="fas fa-briefcase" size="20px"></f7-icon>
> <span class="tabbar-label">Ofrecer</span>
> </f7-link>
> <f7-link tab-link route-tab-id="tab-3" href="/licitar/">
> <f7-icon icon="fas fa-cart-plus" size="20px"></f7-icon>
> <span class="tabbar-label">Licitar</span>
> </f7-link>
> <f7-link tab-link route-tab-id="tab-4" href="/mensajes/">
> <f7-icon icon="fas fa-comments" size="20px"></f7-icon>
> <span class="tabbar-label">Mensajes</span>
> </f7-link>
> <!--<f7-link tab-link route-tab-id="tab-5" href="/noticias/">
> <f7-icon icon="far fa-newspaper" size="20px"></f7-icon>
> <span class="tabbar-label">Noticias</span>
> </f7-link>-->
> <f7-link tab-link route-tab-id="tab-6" href="/perfil/" v-if="logueado">
> <f7-icon icon="fas fa-user" size="20px"></f7-icon>
> <span class="tabbar-label">Perfil</span>
> </f7-link>
> <f7-link tab-link route-tab-id="tab-7" href="/entrar/" v-else>
> <f7-icon icon="fas fa-user" size="20px"></f7-icon>
> <span class="tabbar-label">Entrar</span>
> </f7-link>
> </f7-toolbar>
> <f7-tabs routable>
> <f7-tab id="tab-1"></f7-tab>
> <f7-tab id="tab-1-2" ></f7-tab>
> <f7-tab id="tab-2"></f7-tab>
> <f7-tab id="tab-3"></f7-tab>
> <f7-tab id="tab-4"></f7-tab>
> <!--<f7-tab id="tab-5"></f7-tab>-->
> <f7-tab id="tab-6"></f7-tab>
> <f7-tab id="tab-7"></f7-tab>
> </f7-tabs>
> </f7-page>
> </template>
<script>
import firebase from 'firebase';
import {f7View, f7Row, f7Button, f7Col, f7Popup,f7Toolbar, f7Tabs, f7Tab, f7Page, f7Block, f7Navbar,
f7NavLeft, f7NavTitle, f7NavTitleLarge, f7NavRight, f7BlockTitle, f7List, f7ListItem,
f7Link, f7Searchbar, f7Icon, f7Statusbar } from 'framework7-vue';
export default {
components: {
f7Page,
f7Navbar,
f7NavLeft,
f7NavTitle,
f7NavTitleLarge,
f7NavRight,
f7BlockTitle,
f7List,
f7ListItem,
f7Link,
f7Searchbar,
f7Icon,
f7Block,
f7Tabs,
f7Tab,
f7Toolbar,
f7Popup,
f7Col,
f7Button,
f7Row,
f7View,
f7Statusbar
},
data(){
return {
showMobileMenu: false,
popupOpened: false,
logueado: '',
pagina_principal: ''
}
},
created(){
let vm = this;
vm.logueado = firebase.auth().currentUser ? true:false;
},
updated(){
let vm = this;
vm.pagina_principal = localStorage.getItem("pagina_principal"); //1 Categorias General, 2 Listado licitaciones
},
};
</script>
Entonces lo que requiero hacer es de la vista /licitar/, que se encuentra en el
route-tab-id="tab-3" siendo el componente Licitaciones.vue, hacer uso de $emit.
Home.vue es el componente padre, Licitaciones.vue sería el componente hijo, por tal razón quiero que del componente hijo se ejecute un método que se encontrara el componente padre.
Tengo la duda de como emitir el evento, ya que desde Home.vue, no importo Licitaciones.vue, pues Licitaciones.vue contiene su propia vista.
Soy inexperto en este tema, de antemano muchas gracias por el apoyo.