Vue 组件渲染函数：打印未转义的 html 实体

Question

如何让 Vue 2 渲染我的组件而不转义 HTML 实体并将其打印为普通文本？如果它是一个标签，我会嵌套另一个 createElement，但事实并非如此。

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

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

您可以在 createElement 函数的第二个参数中定义 DOM 属性和 HTML 属性。

文档：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: '&nbsp;'
        }
    })
  }
})

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>

评论后更新：

您可以像这样用 children 填充您的组件：

Vue.component('my-component', {
  render: function(createElement) {
    return createElement('div', 
    [
      createElement('p', 'top tag'),
      createElement('div', {
        domProps: {
            innerHTML: 'A&nbsp;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>

Vue 组件渲染函数：打印未转义的 html 实体

Vue component render function: print unescaped html entity

vue.js

vue-component

vuejs2