Passing Data From Child component to Child Component Vuejs 2

Question

I misunderstood the documentation of passing child component to other child component.

I have two components

index.html

<main-categories-products source="{{ url('api/products') }}">
</main-categories-products>

<sidebar-options> </sidebar-options>

My app.js

 var app = new Vue({
  el: '#app',
  components: {
    MainCategoriesProducts,
    SidebarOptions
  }

})

MainCategoriesProducts.vue

import Vue from 'vue'
var bus = new Vue()
    export default{
        props: ['source'],
        created(){

            this.fetchedProduct()
        },
        methods: {

            fetchedProduct: function(){


                        var data = [1,2, 3];

                        bus.$emit('did-something', data);


            }
        }
    }

My SidebarOptions.vue

import Vue from 'vue'
    var bus = new Vue()

    export default{

        data(){

            return {

                someData: {}
            }
        },

        created(){

            bus.$on('did-something', data => this.someData = data);
            console.log(this.someData)

        }
    }

No errors but I can't get the data from MainCategoriesProducts to SidebarOptions. How can I get those data = [1, 2, 3]? TY

Bert · Accepted Answer · 2017-05-05 02:54:55Z

1

You're creating two different buses, and you should just create one.

In app.js add this

window.bus = new Vue();

And remove

var bus = new Vue()

from each of your components.

answered May 5, 2017 at 2:54

Bert

82.5k17 gold badges204 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bert Over a year ago

@Rbex glad to help :)

Collectives™ on Stack Overflow

Passing Data From Child component to Child Component Vuejs 2

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related