[Vuejs]-Get data from component in VueJS

by

0👍

If the <custom-vue></<custom-vue> component is a child component of the template you are showing, then you have to access the data through props in the child component.

<script>
export default {
    props: ['data']
}
</script>

To give the child component these data you have to give it through the component tag like so:

<template>
    <div>
        <custom-vue :data="dataToExtract"></custom-vue>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                dataToExtract: "Access this"
            }
        }
    }
</script>

Remember that is is a unidirectional dataflow, so you wont be able to change the data state from the child with this.

A better way to share data states across components is Vuex.

I hope this will help you. For further documentation visit: https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

    Leave a comment