Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.