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
函数可以接受三个参数:
-
标签名或组件
- 可以是一个字符串(例如
'div'
、'span'
)或组件对象。
- 可以是一个字符串(例如
-
数据对象(可选)
- 用于描述元素的属性、事件、样式等。
-
子节点(可选)
- 可以是一个字符串、数组或其他由
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),
]);
}
这是因为对上面的写法进行了如下简化:
- createElement => h
- 改成箭头函数写法