Vue.js - Using parent data in component

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>

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>

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