在我们常见的点击编辑后跳转到详细信息页面中遇到这个报错,通过查资料得知是由于在组件中定义了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 }}

   那么传统的方式就是在组件中用到了路由对象,那么组件就和路由耦合了。