vue使用render來寫組件
博客園同步更新
ps：內容簡單勿吐槽。這里的例子是跟着官網的渲染函數。
渲染函數介紹
Vue 推薦在絕大多數情況下使用模板來創建你的HTML。然而在一些場景中，你真的需要 JavaScript 的完全編程的能力。這時你可以用渲染函數，它比模板更接近編譯器。
實例
讓我們深入一個簡單的例子，這個例子里render函數很實用。假設我們要生成一些帶錨點的標題。
首先來定義一個簡單的組件：
<template>
<div>
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else>
<slot></slot>
</h6>
</div>
</template>
<script>
export default {
props:{
level:{
type:Number,
default:1
}
},
data(){
return {
}
}
}
</script>
組件完成，來引用組件：
<template>
<div>
<heading :level='level'>這里是插槽內容 現在的leave={{2}}</heading>
</div>
</template>
<script>
import heading from './heading.vue'
export default {
components:{
heading:heading
},
data() {
return {
level:2
}
},
}
</script>
效果如圖，如果打開控制台也是可以看見標簽元素是h2。
這樣寫顯得很麻煩，如果我們來試試render函數寫一波新組件
<script>
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)
])
},
}
</script>
這里保持和原來使用模板寫的組件一樣最外層一層div里面才是包這h標簽，當非12345的時候，使用h6標簽。
所以這里可以簡單看出createElement(Element,options,childrens);Element是要渲染的元素標簽，options這里是該標簽的一些配置也可以添加事件比如class/attrs/domProps屬性，childres是一個數組里面放着子內容也可以由多個createElement(Element,options,childrens)這樣的內容，具體的話看具體情況。
結語
關於渲染函數還是要多使用，孰能生巧，肯定沒錯，寫多了就理解的快。第一次使用markdown寫文章 還是很爽的，只是學到一些簡單的語法。之后應該會分享一些ts和vue3的實踐，因為最近寫的最多的就這個。