在我們常見的點擊編輯后跳轉到詳細信息頁面中遇到這個報錯,通過查資料得知是由於在組件中定義了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 }}
那么傳統的方式就是在組件中用到了路由對象,那么組件就和路由耦合了。