0

Estou com um problema, Preciso passar um objeto entre dois componentes independentes mas não estou a conseguir, já tentei com o $broadcast mas sem sucesso, seguem os meus componentes para terem a ideias da estrutura. O objetivo era passar um objeto do componente e o componente

App.Vue:

<template>
<div id="app">
    <main>
        <slide></slide>
        <div class="container">
            <div class="row">
                <div class="col s12 m9 l9">
                    <div class="spinner" v-if="loading">
                        <div class="indeterminate"></div>
                    </div>
                    <body-content v-if.sync="show"></body-content>
                </div>
                <div class="col s12 m3 l3 center-align">
                    <right v-if.sync="show"></right>
                </div>
            </div>
        </div>
    </main>
    <footer class="page-footer">
        <div class="container">
            <div class="row">
                <div class="col l2 s12">
                    <img class="responsive-img" :src="'storage/guest/' + logoFeup">
                </div>
                <div class="col l6 s12">
                    <div class="morada" style="margin-left:55px;">
                        <h6><strong>Faculdade de Engenharia da Universidade do Porto</strong></h6>
                        <p class="text-lighten-4 adress-footer">
                            Rua Dr. Roberto Frias, s/n <br/>
                            4200-465 Porto <br/>
                            PORTUGAL<br/>
                            Contacte-nos
                        </p>
                    </div>
                </div>
                <div class="col l4 s12 valign-wrapper social-media">
                        <span style="font-size: 13px;">SIGA-NOS:</span>
                        <span class="fa-stack fa-lg">
                          <i class="fa fa-circle-thin fa-stack-2x"></i>
                          <i class="fa fa-twitter fa-stack-1x"></i>
                        </span>
                        <span class="fa-stack fa-lg">
                          <i class="fa fa-circle-thin fa-stack-2x"></i>
                          <i class="fa fa-facebook fa-stack-1x"></i>
                        </span>
                        <span class="fa-stack fa-lg">
                          <i class="fa fa-circle-thin fa-stack-2x"></i>
                          <i class="fa fa-linkedin fa-stack-1x"></i>
                        </span>
                        <span class="fa-stack fa-lg">
                          <i class="fa fa-circle-thin fa-stack-2x"></i>
                          <i class="fa fa-instagram fa-stack-1x"></i>
                        </span>
                </div>
            </div>
        </div>
    </footer>
</div>

<script type="text/javascript">
import SlideComponent from './Slide.vue';
import GuestComponent from './Guest.vue';
import RightComponent from './Right.vue';

//import NoticiaIndexComponent from './noticia/NoticiaIndex.vue';

export default{
    components:{
        'body-content': GuestComponent,
        'slide': SlideComponent,
        'right': RightComponent,

        //'noticia-index': NoticiaIndexComponent,
    },
    created(){
        window.Vue.http.interceptors.unshift((request, next) => {
            this.loading = true;
            next(()=>{
                this.loading = false;
                this.show = true;
            });
        });
    },
    data(){
        return {
            loading: false,
            logoFeup: 'feup-logo.png',
            show: false,
        }
    },
}

  <style type="text/css">
   #app{
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    }
  main {
   flex: 1 0 auto
  }
 </style>

1 Resposta 1

0

Faltou me fazer o $boradcast no componente pai para poder passa-lo para o outro componente filho, segue a solução.

Componente Guest.Vue:

Adicionar o dispatch, no meu caso foi num método:

selectSemana(){
            this.$dispatch('selectInstaFeed', {year: this.pesquisa.currentYear, week: this.pesquisa.currentWeek});
            this.youtubePlayer = [];
            this.getWeekNoticias();
        },

Já no componente pai "App.Vue" adicionar o evento com o $broadcast:

events: {
        'selectInstaFeed'(data) {
            this.$broadcast('selectInstaFeed', data);
        },
    }

E por fim para passar os dados para o componente Right.Vue adicionar aos eventos:

events: {
        'selectInstaFeed'(data){
            this.current_week = data.week;
            this.current_year = data.year;
            this.changeFeed();
        },
    },

Done!!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .