1. An overview of the

Vue’s Render method, the render function, is closer to a compiler than a template, meaning it performs better than a template, and we need to learn the Render method if we want to write better components or read other people’s code

2. Grammar

The parameters accepted by the Render method and createElement are described below

Vue.component('component-name', {
	render(createElement){
        // @returns {VNode} returns the virtual DOM node object
        return createElement(
        	// {String | Object | Function}
            // An HTML tag name, component option object, or
  	        Resolve an async function of any of the above. Required fields.
            'div'.// {Object}
  			// A data object corresponding to the attribute in the template
            {},
            // {String | Array}
            // Child virtual nodes (VNodes), built from 'createElement()',
  			// You can also use strings to generate "text virtual nodes". Optional.[])}}Copy the code

Example 3.

3.1 The simplest

Vue.component('el-title', {
	data(){return {title: 'This is a title.'}},
    render(createElement) {
        /* 
       equivalent to 
 This is a title 
 */
        return createElement('h1'.this.title)
    }
}
Copy the code

3.2 Specifying attributes

Vue.component('el-title', {
	data(){return {title: 'This is a title.'}},
    render(createElement) {
        / * (el - the title / > equivalent < h1 class = "title" > this is a title < / h1 > * /
        return createElement('h1', {class: {title: true}}, this.title)
    }
}
Copy the code

3.3 Using slots

Vue.component('el-title', {
    render(createElement) {
        / * (el - the title > < h1 class = "title" > this is a title < / h1 > < / el - the title > equivalent to < div class = "title" > < h1 class = "title" > this is a title < / h1 > < / div > * /
        return createElement('div', {class: {title: true}}, this.$slots.default)
    }
}
Copy the code

3.4 Using scope slots

Vue.component('el-title', {
	data(){return {title: 'This is a title.'}},
    render(createElement) {
        / * (el - the title > < template slot - scope = "scope" > < h1 > {{scope. The text}} < / h1 > < / template > < / el - the title > equivalent to < div Class ="title">
 This is a title 
 */
        return createElement('div', {class: {title: true}}, 			
        	this.$scopedSlots.default({
                text: this.title
            }))
    }
}
Copy the code

3.5 Multiple child elements

Vue.component('el-title', {
    render(createElement) {
        / * (el - the title > < / el - the title > equivalent to < div class = "title" > < h1 > title 1 < / h1 > < h1 > title 2 < / h1 > < / div > * /
        return createElement('div', {class: {title: true}}, [
                createElement('h1'.'heading 1'),
                createElement('h1'.'title 2')]}}Copy the code

3.6 Loop generation of child elements

Vue.component('el-table', {
	data(){return {
        columns = [
                {label: 'heading 1'},
                {label: 'title 2'}}},render(createElement) {
        / * (el - table > < / el - table > equivalent < table class = "el - table__header" > < thead > < th > < div > title 1 < / div > < / th > < th > < div > title 2 < / div > < / th >   */ 
        return createElement('table', {class: {'el-table__header': true}}, [
            createElement('thead'.this.columns.map(column= >{
                return createElement('th',[createElement('div',column.label)])
            }))
        ])
    }
}
Copy the code