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 }}
   那么傳統的方式就是在組件中用到了路由對象,那么組件就和路由耦合了。

 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM