How to transfer data between components (siblings) Vue?

Question

In the HeaderComponent method 'clickPrices' is called on click

<template>
    <header>
        <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
            <h5 class="my-0 mr-md-auto font-weight-normal"><a href="/">Company name</a></h5>
            <nav class="my-2 my-md-0 mr-md-3">
                <a class="p-2 text-dark" href="#">Features</a>
                <a class="p-2 text-dark">Enterprise</a>
                <a class="p-2 text-dark" @click="clickPrices()">Get pricing</a>
            </nav>
            <a class="btn btn-outline-primary " href="#">Sign up</a>
        </div>
    </header>
</template>

<script>

    export default {
        name: "HeaderComponent",
        methods: {
            clickPrices() {
                ...
            },
        },
    }
</script>

<style scoped>

</style>

and there is a Pricing Component in which I make a request to the server in the method 'getPricing'

<template>
    <div class="wrap-pricing">
        <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
            <h1 class="display-4">Pricing</h1>
            <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
        </div>
        <div class="container">
            <div class="card-deck mb-3 text-center">
                <div class="card mb-4 shadow-sm">
                    <div class="card-header">
                        <h4 class="my-0 font-weight-normal">Lorem</h4>
                    </div>
                    <div class="card-body">
                        <h1 class="card-title pricing-card-title">$10 <small class="text-muted">/ mo</small></h1>
                        <ul class="list-unstyled mt-3 mb-4">
                            <li>Lorem</li>
                            <li>Lorem</li>
                            <li>Lorem</li>
                            <li>Lorem</li>
                        </ul>
                        <button type="button" class="btn btn-lg btn-block"></button>
                    </div>
                </div>
            </div>

           
        </div>
    </div>
</template>

<script>

    import router  from '../routes.js';
    import { axios } from 'axios';

    export default {
        name: "PriceComponent",
        methods: {
            getPricing() {
                axios.get('api/pricing').then((response) => {
                    //some actions
                    router.push('prices');
                });
            },
        },
    }
</script>

<style scoped>

</style>

How should I process the result of the 'сlickPrices' HeaderComponent method? Or am I waiting for your ways, how can I get data in another by clicking in one component

Answer 1

You can emit an event and let the parent component handle the fetching and pass the data as props to the child component.

Or another way is to directly listen to the event as follows

Component 1:

this.$root.$emit('clickPrices', data);

Component 2:

mounted() {
    this.$root.$on('clickPrices', data => {
        this.getPricing();
    });
}

Check out the answer by @alex

Answer 2

Since you are using 2 independent components (one is not included in the other), you cannot pass props

Things you can do -

1. Instead of fetching all the prices on click, just create a created hook like so, which will fetch all the pricing details whenever your component is created -

   created () {
       this.getPricing()
   },
   
   methods: {
       getPricing() {
           axios.get('api/pricing').then((response) => {
               //some actions
               router.push('prices');
           });
       },
   },
   

2. Use State and when a user clicks on the button, pricing details are fetched and added in the state. And you can just use the state anywhere in your application like so -

   this.$store.state.prices

Let me know if it works, if not we will find some other solution for you!