vue.js 2 帶動態模板的單文件組件

Question

我需要一個文件組件來通過 AJAX 加載其模板。 我搜索了一段時間的解決方案，發現了一些關於動態組件的提示。 我制作了一個父組件的組合，它導入一個子組件並使用動態模板呈現子組件。

子組件是這樣的：

<template>
  <div>placeholder</div>
</template>

<script>
import SomeOtherComponent from './some-other-component.vue';

export default {
  name: 'child-component',
  components: {
    'some-other-component': SomeOtherComponent,
  },
};
</script>

父組件是這個

<template>
  <component v-if='componentTemplate' :is="dynamicComponent && {template: componentTemplate}"></component>
</template>

<script>
import Axios from 'axios';
import ChildComponent from './child-component.vue';

export default {
  name: 'parent-component',
  components: {
    'child-component': ChildComponent,
  },
  data() {
    return {
      dynamicComponent: 'child-component',
      componentTemplate: null,
    };
  },
  created() {
    const self = this;
    this.fetchTemplate().done((htmlCode) => {
      self.componentTemplate = htmlCode;
    }).fail((error) => {
      self.componentTemplate = '<div>error</div>';
    });
  },
  methods: {
    fetchTemplate() {
      const formLoaded = $.Deferred();
      const url = '/get-dynamic-template';
      Axios.get(url).then((response) => {
        formLoaded.resolve(response.data);
      }).catch((error) => {
        formLoaded.reject(error);
      }).then(() => {
        formLoaded.reject();
      });
      return formLoaded;
    },
  },
};
</script>

獲取的動態模板代碼是這樣的：

<div>
<h1>My dynamic template</h1>
<some-other-component></some-other-component>
</div>

通常，組件按預期獲取其模板並綁定到它。 但是，當此動態模板中使用了其他組件（some-other-component）時，即使它們在子組件中正確注冊並且當然正確命名為“some-other-component”，它們也無法識別。

我收到此錯誤：[Vue warn]: Unknown custom element: some-other-component - 您是否正確注冊了該組件？ 對於遞歸組件，請確保提供“名稱”選項。

我錯過了什么還是某種問題/錯誤？

Answer 1

我自己回答我的問題，因為我在這里進一步閱讀https://forum.vuejs.org/t/load-html-code-that-uses-some-vue-js-code-in后找到了一個替代解決方案-it-via-ajax-request/25006/3 。

我的代碼中的問題似乎是這個邏輯表達式:is="dynamicComponent && {template: componentTemplate}" 。 我在互聯網的某個地方找到了這種方法。 原始海報可能假設這會導致組件“dynamicComponent”與{template: componentTemplate}合並，后者應該只覆蓋模板選項，而保留導入的child-component.vue中定義的其他組件選項。 但它似乎沒有按預期工作，因為&&是 boolean 運算符而不是“對象合並”運算符。 請有人證明我錯了，畢竟我不是 JavaScript 專家。

無論如何，以下方法可以正常工作：

<template>
  <component v-if='componentTemplate' :is="childComponent"></component>
</template>

<script>
import Axios from 'axios';
import SomeOtherComponent from "./some-other-component.vue";

export default {
  name: 'parent-component',
  components: {
    'some-other-component': SomeOtherComponent,
  },
  data() {
    return {
      componentTemplate: null,
    };
  },
  computed: {
    childComponent() {
      return {
        template: this.componentTemplate,
        components: this.$options.components,
      };
    },
  },
  created() {
    const self = this;
    this.fetchTemplate().done((htmlCode) => {
      self.componentTemplate = htmlCode;
    }).fail((error) => {
      self.componentTemplate = '<div>error</div>';
    });
  },
  methods: {
    fetchTemplate() {
      const formLoaded = $.Deferred();
      const url = '/get-dynamic-template';
      Axios.get(url).then((response) => {
        formLoaded.resolve(response.data);
      }).catch((error) => {
        formLoaded.reject(error);
      }).then(() => {
        formLoaded.reject();
      });
      return formLoaded;
    },
  },
};
</script>