Vue随笔【render函数的使用】

     Vue虽然为我们提供了优秀的 template 语法，但是有些时候人未能满足我们的特定需求，因此需要手动编写Html，这时候就需要借助 vue中的 render 函数。

1、render 是什么？

        在Vue.js中，render函数是一个强大的功能，它允许你直接使用JavaScript来描述DOM结构，而不是通过模板语法。这在需要更多灵活性或进行复杂操作时非常有用。

2、如何使用？

（1）基本用法

 render函数是组件选项中的一个方法，用来替代模板。它接收一个createElement函数作为参数，该函数用于生成虚拟DOM节点。基本用法如下：

new Vue({
  el: '#app',
  render: function(createElement) {
    return createElement('h1', 'Hello, Vue!')
  }
})

在上述示例中，createElement创建了一个h1标签，并且内容是Hello, Vue!。

（2）参数说明

createElement函数可以接受三个参数：

1. 标签名或组件

   • 可以是一个字符串（例如 'div'、'span'）或组件对象。

2. 数据对象（可选）

   • 用于描述元素的属性、事件、样式等。

3. 子节点（可选）

   • 可以是一个字符串、数组或其他由createElement生成的虚拟节点。

render: function(createElement) {
  return createElement('div', {
    attrs: {
      id: 'app'
    },
    style: {
      color: 'red'
    },
    on: {
      click: function() {
        alert('Hello, Vue!')
      }
    }
  }, [
    createElement('span', 'This is a span'),
    createElement('a', { attrs: { href: 'https://vuejs.org' }}, 'Vue.js')
  ])
}

（3）简写方式

        或许在你眼中的 render 应该是这样的

    render: (h, params) => {
              return h('Tooltip', {
                props: {
                  content: params.row.address,
                  placement: "top",
                  transfer: true, // 使得 Tooltip 能够脱离局部滚动的限制
                  maxWidth: 400 // 设置一个足够的最大宽度
                }
              }, [
                h('div', {
                  style: {
                    maxWidth: '200px', // 控制最大宽度
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  }
                }, params.row.address),
              ]);
            }

这是因为对上面的写法进行了如下简化：

1.   createElement => h
2.   改成箭头函数写法