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

Question

我有一个"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

什么可能导致类型错误？

Answer 1

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

对象或数组默认值必须从工厂函数返回，

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

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

应该是

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