Vue.js - Using parent data in component

Question

How I can get access to parent's data variable (limitByNumber) in my child component Post?

I tried to use prop but it doesn't work.

Parent:

import Post from './components/Post.vue';

new Vue ({
    el: 'body',

    components: { Post },

    data: {
        limitByNumber: 4
    }
});

Component Post:

<template>
    <div class="Post" v-for="post in list | limitBy limitByNumber">
    <!-- Blog Post -->
    ....
    </div>
</template>

<!-- script -->    
<script>
export default {
    props: ['list', 'limitByNumber'],
    
    created() {
        this.list = JSON.parse(this.list);
    }
}
</script>

You can use Dependency-Injection, v2.vuejs.org/v2/guide/…

foxiris
– foxiris

2022-05-19 05:34:29 +00:00
Commented May 19, 2022 at 5:34 — foxiris
– foxiris, Commented May 19, 2022 at 5:34

Super Kai - Kazuya Ito · Accepted Answer · 2021-09-24 09:59:14Z

96

Option 1

Use this.$parent.limitByNumber from child component. So your Component template would be like this

<template>
    <div class="Post" v-for="post in list | limitBy this.$parent.limitByNumber" />                
</template>

Option 2

If you want to use props, you can also achieve what you want. Like this.

Parent

<template>
    <post :limit="limitByNumber" />
</template>
<script>
export default {
    data () {
        return {
            limitByNumber: 4
        }
    }
}
</script>

Child Pots

<template>
    <div class="Post" v-for="post in list | limitBy limit">
        <!-- Blog Post -->
        ....
    </div>
</template>

<script>
export default {
    props: ['list', 'limit'],

    created() {
        this.list = JSON.parse(this.list);
    }
}
</script>

edited Sep 24, 2021 at 9:59

Super Kai - Kazuya Ito

42.7k23 gold badges258 silver badges257 bronze badges

answered Apr 19, 2016 at 15:57

Yerko Palma

12.4k5 gold badges37 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Frank N Over a year ago

you don't need the this. before $parent.

pilat Over a year ago

Is there a way to do something like $(this).closest('#parent_element_id') does in jQuery? Although, this.$parent is pretty good, I've ended up with things like: this.$parent.$parent.$parent.$parent.xxxx in one of my components… Need a quick way to refactor this weirdness =)

Sarpdoruk Tahmaz Over a year ago

@pilat Have you ever found a solution ?

user241244 Over a year ago

or for you, @pilat?

Edu Ruiz Over a year ago

in case the $parent.$parent.$parent you are trying to access is the root component you can access it directly with $root @pilat, I know it's a year old comment but maybe it helps someone else.

|

Catch · Accepted Answer · 2025-04-23 12:07:13Z

13

EDIT vue3:

Use provide and inject: https://vuejs.org/guide/components/provide-inject

Or for some more sophisticated approach, you can use Vuex/Pinia.

Original answer (vue 2):

If you want to access some specific parent, you can name all components like this:

export default {
    name: 'LayoutDefault'

And then add some function (maybe like vue.prototype or Mixin if you need it in all your components). Something like this should do it:

getParent(name) {
    let p = this.$parent;
    while(typeof p !== 'undefined') {
        if (p.$options.name == name) {
            return p;
        } else {
            p = p.$parent;
        }
    }
    return false;
}

and usage could be like this:

this.getParent('LayoutDefault').myVariableOrMethod

edited Apr 23 at 12:07

answered Jun 19, 2019 at 10:00

Catch

3706 silver badges13 bronze badges

1 Comment

Arnaud Bouchot Over a year ago

This is assuming that all your parent components up the tree have unique names (which it should have anyway) but that's a pretty cool option for what I need to do right now so thank you

Collectives™ on Stack Overflow

Vue.js - Using parent data in component

2 Answers 2

Option 1

Option 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Option 1

Option 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related