在vue.js中访问来自孙子组件的祖父组件的信息

Question

我在Vue中有一个名为RecipeView的父组件，它是一个内联组件。在它里面，我有这些组件： comments。在内部评论中，我有comment和NewCommentForm，如下图所示。

我将RecipeView组件中的id作为道具传递，并希望在NewCommentForm组件中访问它，以便设置我将发布的端点并保存注释。

这是RecipeView组件：

<recipe-view :id="{{$recipe->id}}">

  <comments :data="{{$recipe->comment}}"@added="commentsCount++"></comments>

</recipe-view>

并且它的脚本是这样的：

<script>
    import Comments from '../components/Comments.vue';
    export default {
        props: ['initialCommentsCount','id'],
        components: {Comments},

        data(){
            return {
                commentsCount: this.initialCommentsCount,
                recipe_id:this.id
            };
        }
    }
</script>

评论组件如下所示：

<template>
<div>
    <div v-for="comment in items">
        <comment :data="comment"></comment>
    </div>
    <new-comment-form :endpoint="'/comments/**Here should go the id from parent RecipeView component**'" @created="add"></new-comment-form>
</div>
</template>

<script>
    import Comment from './Comment.vue';
    import NewCommentForm from './NewCommentForm.vue';
    export default {
        props: ['data'],

        components: {Comment, NewCommentForm},

        data() {
            return {
                items: this.data,
                endpoint: ''
            }
        },

        methods: {
            add(comment) {
                this.items.push(comment);
                this.$emit('added');
            }
        }
    }
</script>

这是NewCommentForm组件：

<template>
    <div>
            <div class="field">
                <p class="control">
                    <input class="input"
                           type = "text"
                           name="name"
                           placeholder="What is your name?"
                           required
                           v-model="name">
                </p>
            </div>
            <div class="field">
                <p class="control">
                    <textarea class="textarea"
                              name="body"
                              placeholder="Have your say here..."
                              required
                              v-model="body">

                    </textarea>
                </p>
            </div>
            <button type="submit"
                    @click="addComment"
                    class="button is-medium is-success">send</button>
    </div>
</template>

<script>
    export default {
        props:['endpoint'],
        data(){
            return {
                body:'',
                name:'',
            }
        },
        methods:{
            addComment(){
                axios.post(this.endpoint, {
                    body:this.body,
                    name: this.name
                }).then(({data}) => {
                    this.body = '';
                    this.name = '';
                    this.$emit('created', data);
                });
            }
        }
    }
</script>

感谢您的帮助。