如何在Vue

Question

中编译从外部API加载的模板我有一个非SPA网站应用程序，它具有Vue组件，这非常好用。但是，我正在寻找一种通过外部API加载包含Vue的HTML的方法。

所以，我只是做出一个/ajax/dialogbox/client/add呼叫时返回包含Vue组件，如HTML：

<h1>Add client</h1> 
<div>My static content</div> 
<my-component></my-component> 

但显然<my-component></my-component>没有做任何事情。 在Angular 1我使用$compile服务在输出前编译HTML。

有没有办法在Vue做同样的事情？

Answer 1

Vue中有一个compile function可用于编译模板以渲染函数。使用编译后的函数需要比您提供的更多的细节（例如，如果您需要将返回的模板与数据一起使用），但下面是一个示例。

console.clear() 
 

 
Vue.component("my-component",{ 
 
    template: `<h1>My Component</h1>` 
 
}) 
 

 
const template = ` 
 
<div> 
 
<h1>Add client</h1> 
 
<div>My static content</div> 
 
<my-component></my-component> 
 
</div> 
 
` 
 

 
new Vue({ 
 
    el: "#app", 
 
    data:{ 
 
    compiled: null 
 
    }, 
 
    mounted(){ 
 
    setTimeout(() => { 
 
     this.compiled = Vue.compile(template) 
 
    }, 500) 
 
    
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<div id="app"> 
 
    <component :is="compiled"></component> 
 
</div>

注意，在本例中，我包你的示例模板在div标签。 Vue要求在Vue或组件的单个根元素上存在。