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

解决方案：

＆＃13;

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)

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-component></my-component>
</div>

＆＃13;

评论后更新：

您可以使用以下子代填充您的组件：

＆＃13;

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)

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-component></my-component>
</div>

＆＃13;

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

1 个答案: