Vue組件渲染函數：打印未轉義的html實體

Question

如何讓Vue 2渲染我的組件而不轉義HTML實體並將其作爲普通文本打印？如果它是一個標籤，我會嵌套另一個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>

Answer 1

您可以定義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', { 
 
    \t domProps: { 
 
     \t 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>