Vue 구성 요소 렌더 함수: 이스케이프되지 않은 html 엔티티 인쇄

Vue 구성 요소 렌더 함수: 이스케이프되지 않은 html 엔티티 인쇄

HTML 엔티티를 빠져나와 일반 텍스트로 인쇄하지 않고 Vue 2에서 구성 요소를 렌더링하도록 하려면 어떻게 해야 하는가?그게 태그였다면 다른 사람을 둥지로 만들었을 거야createElement, 그러나 이것은 사실이 아니다.

Vue.component('my-component', {
  render: function(createElement) {
    return createElement('div', ' ')
  }
})

new Vue({
  el: '#app',
  components: [
    'my-component'
  ]
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>

<div id="app">
  <my-component />
</div>

다음 두 번째 인수에 DOM 속성과 HTML 속성을 정의할 수 있다.createElement기능을 하다

문서: https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth

해결책:

Vue.component('my-component', {
  render: function(createElement) {
    return createElement('div', {
    	domProps: {
      	  innerHTML: ' '
        }
    })
  }
})

new Vue({
  el: '#app',
  components: [
    'my-component'
  ]
})

console.log(document.getElementById('app').firstChild.innerHTML)

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-component></my-component>
</div>

주석 후 업데이트:

구성 요소를 다음과 같은 자녀로 채울 수 있다.

Vue.component('my-component', {
  render: function(createElement) {
    return createElement('div', 
    [
      createElement('p', 'top tag'),
      createElement('div', {
        domProps: {
            innerHTML: 'A B'
          }
      }),
      createElement('p', 'bottom tag'),
    ]
    )
  }
})

new Vue({
  el: '#app',
  components: [
    'my-component'
  ]
})

console.log(document.getElementById('app').firstChild.innerHTML)

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-component></my-component>
</div>

참조URL: https://stackoverflow.com/questions/43734263/vue-component-render-function-print-unescaped-html-entity