zoukankan      html  css  js  c++  java
  • 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 }}
       那么传统的方式就是在组件中用到了路由对象,那么组件就和路由耦合了。

     
     
  • 相关阅读:
    CSDN的验证码,真得很糟糕
    CSDN的验证码,为什么要这样呢
    <转>http协议 文件下载原理详解
    验证码,验证码,继续
    搞了一天,气死我了
    昨天下午三点,到晚上六点写的(干死单文档)
    一个早晨加,一个上午的结果
    Linux+QT4+我忙活半宿的结果
    Linux真好玩阿,不过我家电脑不行,运行不够流畅
    springboot之整合JPA
  • 原文地址:https://www.cnblogs.com/YST-study/p/15091018.html
Copyright © 2011-2022 走看看