Pass information from a child component to a parent component with Vue.js

Question

Thanks for reading my question.

I have doubts about how to accomplish this in my Vue.js app.

Parent Component: App.vue Child Components: Loading.vue, ProductsList.vue, NoProductList.vue

The App component is the container. When the page loads, the Loading component is displayed.

The Loading component then checks for products. If there are products the Loading component will return the products as an object.

If there aren't any products the Loading component will return null.

How do I tell the App component which component to use based on the Loading components return value? ie.. Load the ProductsList component if there are products and the NoProduct component when there aren't any products?.

What's the correct way to do notify the parent component about which component it should use in Vue?

Should I use $emit (pass data from child to parent), State Management https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch or a Bus component?

Some code...

Loading.vue component (child):

export default {
    name: 'loading',
    data () {
        return {
            message: ''
        }
    },
    mounted: function () {
        this.loadingProcess();
    },
    methods: {
        loadingProcess: function () {
        //process
        this.$emit('found-products', 'hola');
    }
}

App.vue component (parent):

<template>
    <div>
        <div id="resultComponent" @found-products="checkProductsList">
            <loading></loading>
            ...
        </div>
    </div>
</template>

Thanks in advance.

Roy J Roy J · Accepted Answer · 2017-04-27T21:19:38

For parent-child interactions, the correct way is for the child to $emit and the parent to set props.

State management and buses are for more complex systems where data must be shared by not-closely-related components.

Pass information from a child component to a parent component with Vue.js

1 Answers