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，并在render()中使用<quick-preview />来呈现结果。

// 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，因为缩小了，< em>仅运行时构建不包含编译器！可以找到更多信息here

将v-html渲染为VUE组件

1 个答案: