v-html을 VUE 구성 요소로 렌더링

v-html을 VUE 구성 요소로 렌더링

VUE에서 VUE 컴포넌트 미리보기(JSFiddle/CodePen과 유사)를 작성하려고 합니다.

구성 요소의 모양을 최종 사용자에게 보여줘야 하는 VUE 컨테이너:

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

의 내용code다음과 같은 raw 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>정의한 VUE 컴포넌트로 html 콘텐츠를 표시할 수 있습니까?

를 사용하여 다이내믹템플릿을 컴파일하여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실행 시에만 컴파일러가 포함되어 있지 않기 때문에 실행 시에만 사용할 수 있습니다.자세한 내용은 이쪽

언급URL : https://stackoverflow.com/questions/51006553/render-v-html-as-vue-components