VUE 中render 函数 渲染html代码的三种方式

话不多说上代码:

<div id="app">
  <test></test>
  <test2></test2>
  <test3></test3>
</div>

 

1. Vue.component('test', {
     render: function (createElement) {
       return createElement(
         'div',
         {},
         ['<h>你好</em>']
       )
     },
     props: {
       level: {
         type: Number,
         required: true
       }
     }
   });

2. Vue.component('test2', {
     render: function (createElement) {
       return createElement(
         'div',
         {},
         [createElement('em',{},'你好')]
       )
     },
     props: {
       level: {
         type: Number,
         required: true
       }
     }
   })

3. Vue.component('test3', {
     render: function (createElement) {
       return createElement(
         'div',
         {domProps: {
       innerHTML: '<em>你好啊</em>'
     },},
         []
       )
     },
     props: {
       level: {
         type: Number,
         required: true
       }
     }
   });

new Vue({
  el: '#app'
});

 

三种方式分别输出为: