How to pass an object between independent components

Question

How to pass an object between independent components

Navigation

#1 by (0 votes)

0

I have a problem, I need to pass an object between two independent components but I am not able to, I have tried with the $ broadcast but without success, they follow my components to have the ideas of the structure. The goal was to pass an object of the component and the component

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>

vue.js component componentes

asked by anonymous 26.05.2017 / 11:07

1 answer

struct that stores number of rows and columns of array and a vector How to query MySQL and PHP database [duplicate]

score 0 · Answer 1

Guest.Vue component:

Add the dispatch, in my case it was a method:

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

In the parent component "App.Vue" add the event with $ broadcast:

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

And finally to pass the data to the Right.Vue component add to the events:

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

Done !!