Vue 在选项对象中提供一个 render 方法可以函数式编写渲染内容: render。
一定要注意的是:return
的一定要是 vNode(createElement
方法返回的结果),否则内容不会显示,也不会报错。
今天在项目中使用函数式组件,截取指定字数的文本,怎么搞都不显示返回结果,render 方法也是执行了,后来发现是返回内容的格式问题。
原代码:
export default {
functional: true,
props: ['text', 'max'],
render: (createElement, content) => {
console.log('测试执行') // 正常打印
const { text, max } = content.props
return text.slice(0, max)
},
}
去官方看了下文档,这里并没有提示要返回什么格式的内容:
# render
详细:
字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个
createElement
方法作为第一个参数用来创建VNode
。
纠结了很久,开始回忆源码中 render
方法的使用,才发现这个方法要返回一个 VNode( 虚拟 DOM 对象),用于挂载或Diff对比。
修改了代码后,内容正常显示:
export default {
functional: true,
props: ['text', 'max'],
render: (createElement, content) => {
const { text, max } = content.props
return createElement('div', text.slice(0, max))
},
}