如何在Vue中编译从外部api加载的模板

Question

我有一个非SPA网络应用程序,其中包含Vue组件,并且非常有用.但是,我正在寻找一种方法来加载包含Vue通过外部API的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中有一个编译函数可以编译模板来渲染函数.使用已编译的函数需要比您提供的更多细节(例如,如果您需要将返回的模板与数据一起使用),但这是一个示例.

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或组件的单个根元素.