我正在做单页应用程序编写样式,以使用vue构建我的应用程序。
但是,传递给子组件的prop数据不会在任何作用域(created(),mounted()等)中加载。
路由器/ index.js
import Vue from 'vue'
import Router from 'vue-router'
import Ques from '@/components/timeline/Ques'
import Timeline from '@/components/Timeline'
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/feeds',
name: 'Timeline',
component: Timeline
},
{
path: '/ques',
name: 'Ques',
component: Ques
}
]
})
时间线
<template>
<main class="timeline_wrapper">
<Ques :timelinePosts="posts"></Ques>
</main>
</template>
<script>
import Ques from './timeline/Ques.vue'
export default {
name: "timeline",
data() {
return {
posts: [
{
id: 0,
name: 'hi'
},
]
}
},
components: { Ques }
}
</script>
奎斯
<template>
</template>
<script>
export default {
name: "Ques",
props: [
'timelinePosts'
],
created () {
console.log(this.timelinePosts);
}
}
</script>
console.log之后的内容是一个错误,指示timelinePosts为“ undefined”。
如何将prop值正确地加载到子组件中?
最佳答案
我认为是因为您已经在路由器中定义了Ques,但它没有props: true
。而且我还认为,如果您不打算从<router-link>
使用它,则应将其删除