1. 程式人生 > 其它 >vue之Missing required prop: "id"

vue之Missing required prop: "id"

在我們常見的點選編輯後跳轉到詳細資訊頁面中遇到這個報錯,通過查資料得知是由於在元件中定義了value屬性,但是在呼叫元件時,卻沒有傳這個值,結合我的程式碼,得出是由於我在使用router路由跳轉時,在路由中寫了目標頁面的id值,但卻沒有在配置路由時新增props: true 。導致子元件無法從父元件中獲取所需要的值。

正確程式碼如下:

子元件:

<create-or-updateisEdit: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 }}
那麼傳統的方式就是在元件中用到了路由物件,那麼元件就和路由耦合了。