javascript - Vue.js - 在组件中使用父数据

Question

如何在我的子组件 Post 中访问父级的数据变量 (limitByNumber)？

我尝试使用道具，但它不起作用。

家长：

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>

Answer 1

选项1

this.$parent.limitByNumber从子组件使用。所以你的组件模板会是这样的

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

选项 2

如果你想使用道具，你也可以实现你想要的。像这样。

家长

<template>
    <post :limit="limitByNumber" />
</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>
export default {
    props: ['list', 'limit'],

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

Answer 2

如果要访问某些特定的父级，可以像这样命名所有组件：

export default {
    name: 'LayoutDefault'

然后添加一些函数（如果你在所有组件中都需要它，可能像 vue.prototype 或 Mixin）。这样的事情应该这样做：

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

和用法可能是这样的：

this.getParent('LayoutDefault').myVariableOrMethod