Vue.js - 在组件中使用父数据 [英] Vue.js - Using parent data in component

问题描述

如何在我的子组件Post中访问父数据变量（limitByNumber）？

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

我尝试使用prop但它不起作用。

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

父母：

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

new Vue ({
    el: 'body',

    components: { Post },

    data: {
        limitByNumber: 4
    }
});

组件发布：

<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>

推荐答案

选项1

从子组件使用 this。$ parent.limitByNumber 。因此，您的组件模板将是这样的

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">                
    </div>
</template>

选项2

如果你想使用道具，你也可以实现你想要的。喜欢这个。

Option 2

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

父母

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

儿童盆

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


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


            created() {
                this.list = JSON.parse(this.list);
            }

        }
</script>

这篇关于Vue.js - 在组件中使用父数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！