Invalid prop: type check failed

 

錯誤出處：

1.子組件

export default {
  name: 'EditApp',
  props: {
    form: {
      type: Object,
      required: true,
      default: Object
    }
  }
}

2.父組件

export default {
  name: 'Home',
  components: {EditApp, AppManager},
  data () {
    return {
      editapp: Object,
      isEditApp: false,
      user: JSON.parse(window.sessionStorage.getItem('user'))
    }
  }
}

3.調用處

  <EditApp v-show="isEditApp" :form="editapp"  @eventCancel="handleEditCancel"></EditApp>

 

問題原因：

由於vue是基於動態綁定的，子組件在form未被賦值前渲染，子組件無法獲取到實際的值而是Object對象，導致渲染時發生異常。

解決辦法：在 父組件中給予默認值

export default {
  name: 'Home',
  components: {EditApp, AppManager},
  data () {
    return {
      editapp: {},
      isEditApp: false,
      user: JSON.parse(window.sessionStorage.getItem('user'))
    }
  }
}