将 v-html 渲染为 VUE 组件

Question

我正在尝试在 VUE 中创建 VUE 组件预览（类似于 JSFiddle/CodePen）。

需要向最终用户展示组件外观的 VUE 容器：

<quickpreview v-html="code"></quickpreview>

code 的内容是原始的 HTML，像这样：

<PRE-TASK>
    <STEP>
        <INSTRUCTION>
            <REF-DS>das Teleskopieren ...</REF-DS>.</INSTRUCTION>
    </STEP>
    <STEP>
        <INSTRUCTION>
            <REF-DS>Sicherheitsanweisungen ...</REF-DS>.</INSTRUCTION>
    </STEP>
    <STEP>
        <INSTRUCTION>
            <REF-DS>Den Teleskopwagen ...</REF-DS>.</INSTRUCTION>
    </STEP>
</PRE-TASK>

<STEP> 和 <INSTRUCTION> 都是有效组件：

components: {
  'step': Step // Step.vue exists
  'instruction': Instruction // Instruction.vue exists
}

强制<quickpreview> 将html 内容显示为我定义的VUE 组件的最简单方法是什么？

Answer 1

您可以使用Vue.compile() 将动态模板编译成Vue component，然后在<quick-preview /> 中使用render() 来呈现结果。

// define the available components
Vue.component('steps', {...})
Vue.component('step', {...})
Vue.component('instruction', {...})

// the <quick-preview /> component
Vue.component('quick-preview', {
  props: ['code'],
  render(h){
    // render a 'container' div
    return h('div', [
      h(Vue.compile(this.code)) // compile and render 'code' string
    ])
  }
})


// then you can use it as
new Vue({
  data(){
    return {
      code: '...'
    }
  },
  template: '<quick-preview :code="code" />'
})

JSFiddle 上的示例

注意：您需要完整构建 Vue.js 以在运行时使用template，因为精简了， runtime-only 构建不包含编译器！更多信息可以找到here