【VUE2】vue中render函数渲染html代码的三种方式

最新推荐文章于 2025-04-14 15:15:47 发布

搬砖的猿@

最新推荐文章于 2025-04-14 15:15:47 发布

阅读量3.8k

点赞数 1

分类专栏： vue 文章标签： vue.js html javascript

原文链接：https://zhuanlan.zhihu.com/p/462987040

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

<div>
    <Test1/>
    <Test2/>
    <Test3/>
</div>
/** ------------------------------第一种------------------------------ */
Vue.component('test1', {
  render: function (createElement) {
    return createElement('div', {}, ['<em>test1</em>'])
  },
  props: {}
})
/** ------------------------------第二种------------------------------ */
Vue.component('test2', {
  render: function (createElement) {
    return createElement('div', {}, [createElement('em', {}, 'test2')])
  },
  props: {}
})
/** ------------------------------第三种------------------------------ */
Vue.component('test3', {
  render: function (createElement) {
    return createElement(
      'div',
      {
        domProps: {
          innerHTML: '<em>test3</em>'
        }
      },
      []
    )
  },
  props: {}
})


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