Vue组件渲染功能：打印未转义的html实体答案

【问题标题】：Vue component render function: print unescaped html entityVue组件渲染功能：打印未转义的html实体
【发布时间】：2017-05-02 09:18:05
【问题描述】：

如何让 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>

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案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>

评论后更新：

您可以使用这样的子组件填充您的组件：

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>

【讨论】：

啊，太好了，这就行了。但是，如果同一元素内还有其他子元素怎么办？ innerHTML 不适合与其他元素搭配使用...