javascript - 如何将 AJAX 数据从 Vue 实例传递到组件？

Question

我正在尝试了解 Vue - 特别是，将数据从 Vue 实例传递到组件。我还在使用 Vue-Router 和 Axios，它(本来就是)一个非常简单的项目，只有一个 JavaScript 文件。

index.html 的重要部分如下所示:

<div id="app">

    <!-- Navigation -->
    <ul>
        <router-link tag="li" to="/" exact><a>Home</a></router-link>
        <router-link tag="li" to="/category"><a>Category</a></router-link>
    </ul>

    <!-- The Content -->
    <router-view></router-view>

</div>

然后在main.js中，有以下内容:

var VideoList = Vue.component('video-list', {
    props: ['posts'],
    template: '<ul> <li v-for="post in posts"> {{post.id}} </li> </ul>'
});

var router = new VueRouter({
    mode: 'history',
    linkActiveClass: 'active',
    routes: [
        { path: '/', component: VideoList},
        { path: '/category', component: VideoList }
    ]
});

new Vue({
    el: '#app',
    data: {
        posts: []
    },
    router: router,
    created: function() {
        var me = this;
        axios.get( '/wp-json/wp/v2/posts' )
            .then( function(response){
                me.posts = response.data;
            })
        }
});

数据从 AJAX 调用加载(我可以记录它等)，并且当我使用 Vue devtools 插件查看它时，数据存在于 Vue 实例上。我只是不太清楚如何将数据传递到 <video-list>成分。目前我收到一个错误:数据属性“posts”已被声明为 prop。请改用 prop 默认值。

Answer 1

您可以将 props 传递给 router-view，就像传递给任何其他组件一样。

<router-view :posts="posts" ></router-view>

VideoList 然后应该可以访问posts。