vue.js - Vue中如何在根组件上传递数据

Question

如何将 传递page_id给Sidebar组件方法highlightNode()，因为我想突出显示新添加的项目。我当前的代码是页面 id 未定义。

这是我的代码和结构。

我的根组件是Sidebar.vue

<template>
    <div>
        <ul>
            <li v-for="page in pages">
                <div :class="{ 'highlight': highlightedNode == page.id }">
                    <router-link :to="'/view/' + page.id" @click.native="highlightNode(page.id)">
                        <span v-title="page.title"></span>
                    </router-link>
                </div>
            </li>
        </ul>
    </div>
</template>

export default {
    data () {
        return {
            pages: [],
            highlightedNode: null
        }
    },
    mounted() {
        this.getPages()
        this.$root.$refs.Sidebar = this
    },
    methods: {
        getPages() {
            axios.get('/get-pages').then(response => {
                this.pages = response.data
            });
        },
        highlightNode(id) {
            this.highlightedNode = id
        },
    }
}

我添加新的页面组件AddNewPage.vue

<template>
    <div>
        <div class="main-header">
            <div class="page-title">
                <input type="text" v-model="page.title" class="form-control">
            </div>
        </div>
        <div class="main-footer text-right">
            <button class="btn btn-success btn-sm" @click="saveChanges()">Save and Publish</button>
        </div>
    </div>  
</template>

export default {
    data () {
        return {
            page: {
                title: null,
            },
        }
    },
    mounted() {
        //
    },
    methods: {
         saveChanges() {
            axios.post('/store-new-filter', this.page)
            .then(response => {
                const id = response.data.id // return page id
                this.$root.$refs.Sidebar.highlightNode(id) // <-- this line, I want to pass page id to hightlight the newly added page.
            })
            .catch( error => {
               
            })
        },
    }
}

或任何替代方式来实现我的预期输出。

提前致谢。

标签： vue.js