Vue js sending data between components

Question

I would like to know how I can send data between two components. So I would like to send to another component the dynamic value which is rendered on selectedBase.price, and be rendered on another component. I've tried with props but not succeed.

<v-layout row wrap primary-title v-for="base in bases" :key="base.id">
        <v-layout column>
            <v-flex xs6 offset-xs3>
                <v-avatar size="80px" class="grey lighten-1">
                    <img :src="base.href" :class="{selected: selectedBase.id == base.id}" @click="selectedBase = base" alt="avatar">
                </v-avatar>
            </v-flex>
        </v-layout>
        <v-layout column>
            <v-flex xs6 offset-xs4>
                <v-subheader>{{base.name}} {{base.price}}€ {{selectedBase.price}}</v-subheader>
            </v-flex>
        </v-layout>
    </v-layout>

<script>

export default {

    data() {
            return {
                selectedBase: {},
                bases: [{
                    id: 1,
                    name: "black",
                    price: 4,
                    href: "../../static/black.jpg"
                }, {
                    id: 2,
                    name: "white",
                    price: 6,
                    href: "../../static/white.jpg"
                }]
            }
        },
        computed: {

            totalBase: function() {
                var totalBase = 0;
                for (var i = 0; i < this.bases.length; i++) {
                    if (this.bases[i].selected) {
                        totalBase += this.bases[i].price;
                    }
                }
                return totalBase;
            }
        },
        methods: {
            getSelectedBase() {
                return this.selectedBase;
            }
        }
}

</script>

You CAN share data between components practically ONLY with props. But recommended way is to use Vuex for shared data. — user6748331
ok, thanks. Could you justify why It's better to use Vuex instead of props in that case? I never used Vuex, I don't know how it works. thanks — user8548238
I can write for you example with "vanilla" Vue with props, and second with Vuex, but later, Im busy now. Can you wait for 1 hour? — user6748331
It's not clear from the question what components are involved. Could you clarify? — Bert

Moisés Pio Moisés Pio · Accepted Answer · 2017-09-07T16:20:02

Yes, props is the right way.

ParentComponent.vue

<template>
    <your-component your-prop="123"></your-component>
</template>

<script>
    import YourComponent from '/path/to/YourComponent'

    export default {
        data() {
            return { }
        },
        components { YourComponent }
    }
</script>

ChildComponent.vue

<template>
    <div>My prop is: {{ yourProp }}</div>
</template>

<script>
    export default {
        data() {
            return { }
        },
        props: ['your-prop']
    }
</script>

You can also use Vuex to share states between your app, but I think it's not the case.

Vue js sending data between components

1 Answers