vue使用render来写组件
博客园同步更新
ps:内容简单勿吐槽。这里的例子是跟着官网的渲染函数。
渲染函数介绍
Vue 推荐在绝大多数情况下使用模板来创建你的HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。
实例
让我们深入一个简单的例子,这个例子里render函数很实用。假设我们要生成一些带锚点的标题。
首先来定义一个简单的组件:
export default {
props:{
level:{
type:Number,
default:1
}
},
data(){
return {
}
}
}
组件完成,来引用组件:
这里是插槽内容 现在的leave={{2}}
import heading from './heading.vue'
export default {
components:{
heading:heading
},
data() {
return {
level:2
}
},
}
效果如图,如果打开控制台也是可以看见标签元素是h2。
这样写显得很麻烦,如果我们来试试render函数写一波新组件
export default {
name: 'heading',
props: {
level: {
type: Number,
default: 1,
},
},
data() {
return {}
},
computed: {},
methods: {},
render(createElement) {
let arr = [1,2,3,4,5]
return createElement('div', {
class: {
// 这里可以添加class
},
attrs: {
// 添加属性的地方
},
domProps: {
// 内容
},
on: {
// 添加事件的地方
},
},
[
arr.includes(this.level)?createElement('h'+this.level, this.$slots.default):createElement('h6', this.$slots.default)
])
},
}
这里保持和原来使用模板写的组件一样最外层一层div里面才是包这h标签,当非12345的时候,使用h6标签。
所以这里可以简单看出createElement(Element,options,childrens);Element是要渲染的元素标签,options这里是该标签的一些配置也可以添加事件比如class/attrs/domProps属性,childres是一个数组里面放着子内容也可以由多个createElement(Element,options,childrens)这样的内容,具体的话看具体情况。
结语
关于渲染函数还是要多使用,孰能生巧,肯定没错,写多了就理解的快。第一次使用markdown写文章 还是很爽的,只是学到一些简单的语法。之后应该会分享一些ts和vue3的实践,因为最近写的最多的就这个。