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>