Vue.js 单文件组件导入失败，“undefined has no properties”

Posted 2023-02-23

【中文标题】Vue.js 单文件组件导入失败，“undefined has no properties”

【英文标题】：Vue.js single file component fails to import, "undefined has no properties"

【发布时间】：2020-10-08 19:01:03

【问题描述】：

我有一个“Settings.vue”组件：

import MyDropdown from "./MyDropdown.vue";
export default 
  components: 
    MyDropdown,
  ,

还有一个“MyDropdown.vue”组件：

export default 
    props: 
        value: 
            type: String,
        ,
        label: 
            type: String,
            default: this.$t("label"),
        ,
    ,
;

在构建时，我收到以下错误：

[Vue warn]: Failed to resolve async component: function MyDropdown() 
      return __webpack_require__.e(/*! import() */ 21).then(__webpack_require__.bind(null, /*! @/components/control/MyDropdown.vue */ "./src/components/control/MyDropdown.vue"));
    
Reason: TypeError: undefined has no properties vue.runtime.esm.js:619

什么可能导致 TypeError？

【参考方案1】：

在 MyDropdown.vue 组件中，label prop 的默认值应该是工厂函数，而不是值。

Object or array defaults must be returned from a factory function,

尽管这种情况下的默认值将解析为字符串，但由于它使用this.$t 函数，看起来使用工厂是正确的方法。

default: this.$t("label"),

应该是

default: () => this.$t("label"),