render vue 添加类_vue使用render来写组件

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的实践，因为最近写的最多的就这个。