Question

我正在做单页应用程序编写样式，以使用vue构建我的应用程序。但是，传递给子组件的prop数据不会在任何范围（created（），mounted（）等）中加载。

router / 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
    }
   ]
   })

timeline.vue

    <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>

Ques.vue

<template>
</template>

<script>
   export default {
     name: "Ques",
     props: [
     'timelinePosts'
     ],
   created () {
     console.log(this.timelinePosts);
   }
  }
</script>

console.log之后是什么错误，提示timelinePosts为'undefined'。如何将prop值正确地加载到子组件中？

Answer 1

我认为是因为您在路由器中定义了Ques，但没有props: true。而且我还认为，如果您不打算从<router-link>中使用它，则应将其删除

Answer 2

我认为您的财产名称错误。只需将timeline.vue :timelinePosts="posts"更改为:timeline-posts="posts"

HTML属性名称不区分大小写。任何大写字符将被解释为小写。因此，骆驼式道具名称需要使用烤肉串大小写的等效项。

Vue.js传递的道具在任何范围内均未定义

2 个答案: