vue.js 2 带动态模板的单文件组件

Question

I need a single file component to load its template via AJAX. I search a while for a solution and found some hints about dynamic components. I crafted a combination of a parent component which imports a child component and renders the child with a dynamic template.

Child component is this:

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

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

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

Parent component is this

<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>

The dynamic template code fetched is this:

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

In general the component gets its template as expected and binds to it. But when there are other components used in this dynamic template (some-other-component) they are not recognized, even if they are correctly registered inside the child component and of course correctly named as 'some-other-component'.

I get this error: [Vue warn]: Unknown custom element: some-other-component - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Do I miss something or is it some kind of issue/bug?

Answer 1

I answer my question myself, because I found an alternative solution after reading a little bit further here https://forum.vuejs.org/t/load-html-code-that-uses-some-vue-js-code-in-it-via-ajax-request/25006/3 .

The problem in my code seems to be this logical expression :is="dynamicComponent && {template: componentTemplate}" . I found this approach somewhere in the internet. The original poster propably assumed that this causes the component "dynamicComponent" to be merged with {template: componentTemplate} which should override the template option only, leaving other component options as defined in the imported child-component.vue . But it seems not to work as expected since && is a boolean operator and not a "object merge" operator. Please somebody prove me wrong, I am not a JavaScript expert after all.

Anyway the following approach works fine:

<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>