vue之Missing required prop: "id"


在我们常见的点击编辑后跳转到详细信息页面中遇到这个报错,通过查资料得知是由于在组件中定义了value属性,但是在调用组件时,却没有传这个值,结合我的代码,得出是由于我在使用router路由跳转时,在路由中写了目标页面的id值,但却没有在配置路由时添加props: true 。导致子组件无法从父组件中获取所需要的值。

正确代码如下:

子组件:

  <create-or-update isEdit :courseId="courseId">create-or-update>

父组件:

          <el-button @click="$router.push({             name: 'update-course',             params: {               courseId: scope.row.id             }           })">编辑el-button>

路由:

      {         path: '/course/:courseId/update',         name: 'update-course',         component: () => import(/* webpackChunkName: course-update */'@/views/course/update'),         props: true       }

拓展:路由之props: true

    当在routes中设置props:ture时,我们在组件中可以通过 props: ['id']获取路由中的参数(id参数)值
    当props:false是无法获取的。
   如果我们不使用props属性,那么我们只能通过传统的方式在组件中获取参数数据
   那么传统的方式为{{ $route.params.id }}
   那么传统的方式就是在组件中用到了路由对象,那么组件就和路由耦合了。

   
vue