Home > Developer > JavaScript
How to Use the render function in Vue, vuerender Function
Render Function
Vue uses template to create your HTML. However, in special circumstances, this write mode cannot meet the requirements, and js programming capability is required. In this case, you need to use render to Create HTML.
When is the render function applicable?
In the work of encapsulating a set of universal button components at a time, the button has four styles (default success error ). First, you may think of the following implementation:
<div v-if="type === 'success'">success</div> <div v-else-if="type === 'error'">error</div> <div v-else-if="type === 'warm'">warm</div> <div v-else>default</div>
In this way, there is no problem when there are few button styles, but imagine that if there are more than 10 button styles needed, the text in the button depends on the actual situation (for example, the text in the success button may be OK or GOOD ). Therefore, the method of writing the template to death is very weak. In such a case, the render function is the best choice.
Rewrite button components based on actual conditions
First, the content generated by the render function is equivalent to the content of the template. Therefore, when using the render function, you must remove the template tag in the. vue file. Only the logical layer is retained.
export default { render(h) { return h('div',{ 'class': { btn: true, success: this.type === 'success', error: this.type === 'error', warm: this.type === 'warm', default: this.type === 'default' }, domProps: { innerHTML: this.$slots.default[0].text }, on: { click: this.clickHandle } }) }, methods: { clickHandle() { // dosomething } }, props: { type: { type: String, default: 'default' }, text: { type: String, default: 'default' } }};
Based on componentized thinking, the abstract is never written into logic. The clickHandle function can trigger different logic based on the type of the button.
Then, call
<btn v-for="(btn, index) in testData" :type="btn.type" :text="btn.text" :key="index">{{btn.text}}</btn>
Use jsx
Yes. Remember that each parameter has the same type and usage. It is too troublesome to PASS Parameters in order. In fact, jsx can be used to optimize this tedious process.
return ( <div class={{ btn: true, success: this.type === 'success', error: this.type === 'error', warm: this.type === 'warm', default: this.type === 'default' }} onClick={this.clickHandle}> {this.$slots.default[0].text} </div>)
Example 2:
When writing similar components, we need to write a lot of long code. For simplicity (laziness makes people progress), we should find a more appropriate way to achieve this effect.
<Body> <div id = "app"> <mycomment: level = "2"> This is an h2 element </mycomment> </div> </body> <script type = "text/x-template" id = "is"> <div>
At this time, the Render function can solve this problem very well. First, let's take a simple example. There is a basic skeleton.
<body> <div id="app"> <render-teample :level="4"> render function </render-teample> </div> </body> <script> Vue.component('render-teample',{ render:function(createElement){ return createElement( 'h'+this.level, this.$slots.default ) }, props: { level: { type: Number, required: true } } var app=new Vue({ el:"#app", }); </script>Then add the style events you want to add to your components, and the events become flesh-and-blood.
<body> <div id="app"> <render-teample :level="4" > <div class="jah" slot="myslot">render function</div> </render-teample> </div> </body> <script> Vue.component('render-teample',{ render:function(createElement){ return createElement( 'h'+this.level, { 'class':{ show:true, hide:false, }, style:{ width:'200px', height:'400px', background:'red', }, attrs:{ name:'h-ex', id:'h-id' }, props:{ myprops:true, }, on: { click: function(event){ alert(this.num) } }, nativeOn:{ click:function(event) { alert(1111) } } }, [ this.$slots.myslot, createElement('div',{ domProps:{ innerHTML:'holle render' } }) ] ) }, props: { level: { type: Number, required: true } } }); var app=new Vue({ el:"#app", data:{ num:110 } }); </script>Note: The VNodes In the constraint component must be unique.
Writing all elements directly under a createElement () is very painful and is not conducive to maintenance.
Therefore
var com1= createElement('p','item1');varcom2= createElement('p','item1');You can use return createElement ('div ', [com1, com2])
In this case, the forbidden return createElement ('div ', [com1, com1])
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
