[Vuejs]-Access the parent's data on child events in Vue js

by

2👍

✅

It seems like you’re asking two different questions.

First, accessing a child’s data from its parent:

If possible, you should pass the array to the child component using the child’s props. Then simply change the array in the parent and any changes will be reflected in the child. If the array really needs to be in the child, then you can define a method to retrieve it.

<template>
    <child-component ref="child">
    </child-component>
</template>

methods: {
    onClick() {
        const myArray = this.$refs.child.getMyArray();
    }
}

And then, in the child

methods: {
    getMyArray() {
        return this.myArray;
    }
}

Second, triggering a change in the parent from the child

In this case, Flame’s answer is most idiomatic. Emit a custom event in the child and listen for that event in the parent.

👤Stephen Thomas

2👍

When you are going from a child to a parent, you should use events:

{
   methods: {
        clickEvent()
        {
            this.$emit('click', mydata);
        }
}

So in your parent element, you can then attach your own callback to the emitted event like so:

<template>
    <my-child-component @click="theParentMethod" />
</template>

You could also use some reactivity by passing an object reference from the parent to the child, so if you change the object in the child, the parent can detect the changes. However this comes with some reactivity gotcha’s, see https://v2.vuejs.org/v2/guide/reactivity.html .

👤Flame

Leave a comment