Vue.js-動態組件導入數據和計算屬性

Question

我有組件“頁面”，應該顯示通過其道具檢索的組件。

當我在組件數據中這樣編碼組件路徑時，我設法獲得了組件負載：

<template>
  <div>
    <div v-if="includeHeader">
      <header>
        <fv-header/>
      </header>
    </div>
    <component :is="this.componentDisplayed" />
    <div v-if="includeFooter">
      <footer>
        <fv-complete-footer/>
      </footer>
    </div>
  </div>
</template>

<script>
  import Header from '@/components/Header/Header';
  import CompleteFooter from '@/components/CompleteFooter/CompleteFooter';

  export default {
    name: 'Page',
    props: {
      componentPath: String,
      includeHeader: Boolean,
      includeFooter: Boolean
    },
    data() {
      componentDisplayed: function () {
        const path = '@/components/my_component';
        return import(path);
      },
    },
    components: {
      'fv-header': Header,
      'fv-complete-footer': CompleteFooter,
    },
  }
</script>

但是使用數據我無法在函數中引用我的道具，因為這是未定義的。

我嘗試使用計算屬性而不是數據，但出現錯誤“ src lazy？0309：5未捕獲（承諾）”錯誤：找不到模塊'@ / components / my_component'。但是該模塊存在！但也許當時不存在？

computed: {
  componentDisplayed: function () {
    const path = `@/components/${this.componentPath}`;
    return import(path);
  },
},

必須解決這個問題，但我是vue.js的初學者:)

Answer 1

與其嘗試在子組件中導入組件，不如將其導入父組件並將整個組件作為道具傳遞。

<template>
  <div :is="component" />
</template>

<script>
export default {
  name: "page",
  props: {
    component: {
      required: true
    }
  }
};
</script>

而在父母

<page :component="component" />

和

import Page from './components/Page';

// and further down

data () {
  return {
    component: HelloWorld
  }
}