Question

我有一个带有一些html的#app容器，并且在#app上创建了Vue实例，所有内容均已编译并转换为Vuejs组件。然后我在另一个html字符串中ajax，我需要以某种方式将其编译为组件，该怎么做？

Answer 1

这是template选项的用例，它可以引用DOM中具有特定ID的Foo（就像您使用<template>选项处理应用程序一样），或直接输入您的HTML模板：

el

您可以通过向组件列表提供函数轻松地将其变成Async Component，该函数将返回一个使用组件构造函数解析的Promise（例如，使用Vue.extend）：

Vue.component({
  template: `<span class="myItem"><slot></slot></span>`
});

const MyLoadingComponent = Vue.extend({
  template: '#my-loading',
});

new Vue({
  el: '#app',
  data() {
    return {
      items: [],
    };
  },
  components: {
    'my-component': loadComponentWithLoading,
  },
  methods: {
    addItem() {
      this.items.push(Math.random());
    },
  },
});

// https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State
function loadComponentWithLoading() {
  return {
    component: loadComponent(),
    loading: MyLoadingComponent,
  };
}

// https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
function loadComponent() {
  return new Promise(function(resolve, reject) {
    loadComponentHtml().then((html) => {
      resolve(Vue.extend({
        // https://vuejs.org/v2/api/#template
        template: html,
      }));
    });
  });
}

function loadComponentHtml() {
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      resolve(`<span class="myItem"><slot></slot></span>`);
    }, 2000);
  });
}

.myItem {
  color: green;
}

.myLoading {
  font-style: italic;
  color: red;
}

Answer 2

在Vue中，这种做法不被认为是一种好的做法，但是实际上您可以使用Vue with template compiler动态地创建组件。

通常，仅在页面中包含脚本标记的Vue的stand-alone发行版已经包含模板编译器。

vuejs-如何将Ajax加载的html转换为vuejs组件

2 个答案: