vue中的render函数学习

最新推荐文章于 2025-07-13 20:43:56 发布

原创最新推荐文章于 2025-07-13 20:43:56 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了Vue.js中的render函数用法，包括如何利用createElement构造虚拟DOM节点，以及在iView等UI框架中的具体应用实例。通过render函数，开发者可以更灵活地控制组件的渲染过程。

1.render函数用来渲染虚拟dom节点

/**
    * createElement 本身也是一个函数，它有三个参数
    * 返回值: VNode，即虚拟节点
    * 1. 一个 HTML 标签字符串，组件选项对象，或者解析上述任何一种的一个 async 异步函数。必需参数。{String | Object | Function} - 就是你要渲染的最外层标签
    * 2. 一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。可选参数。{Object} - 1中的标签的属性
    * 3. 子虚拟节点 (VNodes)，由 `createElement()` 构建而成，也可以使用字符串来生成“文本虚拟节点”。可选参数。{String | Array} - 1的子节点，可以用 createElement() 创建，文本节点直接写就可以
    */

export default {
  render: function(createElement) {
        const menu_items = ["首页","搜索","分类","系统"]
        return createElement('ul', 
          menu_items.map(item => {
            return createElement('li', { //第一个参数
              class: {   //第二个参数
                'uk-nav': true
              },
              domProps: {
                innerHTML: item
              }
            })
          })
        )
      },
}

相当于

<ul>
  <li v-for="item in menu_items"  :class="{'uk-nav': true}">
    {{ item }}
  </li>
</ul>

2.在iview中的使用

render: (h, params) => {
	       return h('div', [
	       //html节点
	              h('Button', {
	                  props: {
	                      type: 'primary',
	                      size: 'small'
	                  },
	                  //节点属性
	                  style: {
	                      marginRight: '5px'
	                  },
	                  on: {
	                      click: () => {
	                          this.show(params.index)
	                      }
	                  }
	              }, 'View'),
	              h('Button', {
	                  props: {
	                      type: 'error',
	                      size: 'small'
	                  },
	                  on: {
	                      click: () => {
	                          this.remove(params.index)
	                      }
	                  }
	              }, 'Delete')
	          ]);
	      }