Understand the use of VUE's render function, vuerender Function

Understand the use of VUE's render function, vuerender Function

We recommend that you use template to create your HTML in most cases. However, in some scenarios, you really need the full programming capability of JavaScript. This is the render function, which is closer to the compiler than the template. At the HTML layer, we decided to define the component interface like this: Generate h1-h6 labels by passing in different levels 1-6, and use slot to generate content

<Div id = "div1"> <child: level = "1"> Hello world! </Child> </div> <script type = "text/x-template" id = "child-template"> 

We try to use the render function to implement the above example. Note that the template option will be ignored when the render function is used. CreateElement receives three parameters:

The first parameter can be an HTML Tag name, either a component or a function. This parameter is required;

The second is the data Object {Object} (optional );

The third is the subnode {String | Array} (Optional). Multiple subnodes [createElement (tag1), createElement (tag2)].
<Div id = "div1"> <child: level = "1"> Hello world! </Child> <child: level = "2"> <! -- Will not be displayed --> <span slot = "footer"> span </span> <p slot = "header"> header slot <span> span </span>/ p> </child> </div> Vue. component ('child ', {render: function (createElement) {console. log (this. $ slots); return createElement ('H' + this. level, // tagName tag name {// set the class 'class': {foo: true, bar: false} for each h tag, // It is rendered as an inline style: {color: 'red', fontSize: '14px '}, // other html attributes attrs: {id: 'foo', 'Data-id': 'bar '}, // DOM attribute domProps: {// innerHTML: 'From domprops',}, // The Event listener is based on "on" // so it no longer supports such as v-on: keyup. enter Modifier on: {click: this. clickHandler },//...}, // you can use this. $ slots: get static content in the VNodes list // $ slots. default is used to access the component's unnamed slot // you need to specify the slot name when you may need to name the slot, this. $ slots. header [this. $ slots. default])}, template: '<div v-if = "level = 1"> <slot> </div> ', // will be ignored props: {level: {type: Number, required: true }}, methods: {clickHandler: function () {console. log ('clickhandler') }}) new Vue ({el: "# div1 "})
We can now complete such components
<H1> <a name = "hello-world" href = "# hello-world" rel = "external nofollow"> Hello world! </A> 
Note the uniqueness of the VNode. It is incorrect that the two vnodes point to the same reference. If you want to create multiple identical elements/components, you can use the factory function.
<div id="div1">  <child :level="1">   Hello world!  </child></div>Vue.component('child',{  // render: function(createElement) {  // var myParagraphVNode = createElement('p','hello')  // return createElement('div',  //   [myParagraphVNode, myParagraphVNode]  // )  // },  render: function(createElement) {    return createElement('div',      Array.apply(null, {length:20}).map(function() {        return createElement('p','hello')      })    )  },  props: {    level: {      type: Number,      required: true    }  }})new Vue({  el:"#div1"})
Use javascript to replace the template function. Some APIs must be implemented by yourself.

① Replace v-if with if/else

② Use map instead of v-
Vue. component ('child ', {render: function (createElement) {if (this. lists. length) {return createElement ('ul ', this. lists. map (function () {return createElement ('lil', 'Hi')} else {return createElement ('P', 'no Lists') }}, props: {level: {type: Number, required: true }}, data: function () {return {lists: [1, 2, 3] }}) // The render function does not have the corresponding v-model api. You must implement the corresponding logic by yourself: Vue. component ('child-msg ', {render: function (createElement) {var self = this; return createElement ('div', [createElement ('input', {'on ': {input: function (event) {self. value = event.tar get. value ;}}), createElement ('P', self. value)])}, props: {level: {type: Number, required: true }}, data: function () {return {value :''}}}) new Vue ({el: "# div1 "})
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.