How vue uses the render function
This article mainly introduces vue how to use the render function, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.
Render function
In some scenarios you may need the full programming capabilities of render rendering functions to solve problems that are not easy to solve, especially to dynamically select scenarios that generate tags and component types.
1 dynamic label
1. General situation
For example, a scenario in which tags are generated based on props
Where level is a variable in data, you can see that there is a lot of repetitive code here. If the logic is more complex and some binding and judgment are added, you can use the render function to judge the tag to be generated.
two。 Optimize
Using the render method to generate corresponding tags based on parameters can avoid the above situation.
Hello world! Import Vue from 'vue' Vue.component (' child', {render (h) {const tag = ['div',' packs, 'strong',' H2, 'h3percent,' textarea'] [this.level] return h (tag, this.$slots.default)}, props: {level: {type: Number, required: true}}}) export default {name: 'hehe', data () {return {level: 3}
2 dynamic components
Of course, there are many uses of the render function, for example, to use dynamic components, in addition to using: is, you can also use the render function
Import Vue from 'vue' import Xixi from'. / Xixi' import Haha from'. / Haha' Vue.component ('child', {render (h) {const tag = [' xixi', ''] [this.level] return h (tag, this.$slots.default)}, props: {level: {type: Number, required: true}}, components: {Xixi, Haha}}) export default {name:' hehe' Data () {return {level: 0} Thank you for reading this article carefully. I hope the article "how to use the render function of vue" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
