來自 Promise 的 Vue 動態組件

Question

我遵循了 Vue 文檔並偶然發現了這一點：

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

我嘗試實現這樣一個組件，當“組件”屬性是一個簡單組件的new Promise時，它​​運行良好，但是我無法讓它與import語句一起使用（如示例中所示）。

問題是，我不知道應該在'MyComponent.vue'中寫什么。 這是我當前的代碼：

我的組件.vue：

<template>
  <!-- Components with bindings and events -->
</template>

<script>
  // Regular component, works well when imported directly without a promise
  const mainComponent = {
    name: "LoadedCategorySelect",
    data() {
      return {
        categories,
        // ...
      };
    },
    methods: {
      onCatChange(a) { // bound to v-on
        // ..
        this.$emit('newcat', this.somedata);
      },
      onSubCatChange(a) {
        // Same as above
      }
    }
  };

  export default new Promise((resolve, reject) => {
        // Async work
        fetch('http://someurl.com/slug')
          .then((data) => {
            // ...
            resolve(mainComponent);
          })
          .catch((error) => {
            reject(error);
          });
    }
  );
</script>

使用此代碼，組件會呈現，但事件不會在其他內容中注冊。 我收到很多錯誤，例如： Property or method "onSubCatChange" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property Property or method "onSubCatChange" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

我錯過了什么？ 謝謝

PS：我使用的是 Vue 2.5

Answer 1

問題是您正在從組件中導出 Promise，這是完全錯誤的。

您不必也不應該更改組件本身的任何內容。 它應該像往常一樣導出一個組件選項對象，然后您從指南中獲取的異步包裝器應該按原樣工作：

// MyComponent.vue
<script>
  export default {
    name: "LoadedCategorySelect",
    data() {
      return {
        categories,
        // ...

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

這樣做的好處是：無需以任何方式更改組件即可作為高級異步組件工作。

編輯：回復您的評論：

如果您想將異步數據加載包裝到其中，您可以 - 但它並不漂亮，我從未發現需要這樣做，但您可能會這樣做。 重要的是該函數必須返回一個最終解析為組件對象的承諾。

//...
component: () => new Promise(resolve => {
  const aComponent = import('./MyComponent.vue').then(c => c.default)
  const aData = fetch()....
  Promise.all(aComponent, aDdata).then(([component, data]) => {
    // dosomething with  data
    // then resolve the component: 
    resolve(component)
  })
})