vue.js - 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

什么可能导致 TypeError？

Answer 1

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

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

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

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

应该

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