This article introduces how to understand the specific usage of Vue's render function. I will share it with you. The details are as follows:
The first parameter (must) - {String | Object | Function}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="/vue/2.3.4/"></script>
</head>
<body>
<div >
<elem></elem>
</div>
<script>
('elem', {
render: function(createElement) {
return createElement('div');//A HTML tag character /*return createElement({
template: '<div></div>'//Component Options Object
});*/
/*var func = function() {
return {template: '<div></div>'}
};
return createElement(func());//A function that returns HTML tag characters or component option objects*/
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
The second parameter (optional) - {Object}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="/vue/2.3.4/"></script>
</head>
<body>
<div >
<elem></elem>
</div>
<script>
('elem', {
render: function(createElement) {
var self = this;
return createElement('div', {//A data object containing template-related attributes 'class': {
foo: true,
bar: false
},
style: {
color: 'red',
fontSize: '14px'
},
attrs: {
id: 'foo'
},
domProps: {
innerHTML: 'baz'
}
});
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
The third parameter (optional) - {String | Array}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="/vue/2.3.4/"></script>
</head>
<body>
<div >
<elem></elem>
</div>
<script>
('elem', {
render: function(createElement) {
var self = this;
// return createElement('div', 'text');// Use strings to generate text nodes return createElement('div', [//Array constructed from the createElement function createElement('h1', 'Main mark'),//createElement function returns VNode object createElement('h2', 'Submark')
]);
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
Comparison of the two components writing methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="/vue/2.3.4/"></script>
</head>
<body>
<div >
<ele></ele>
</div>
<script>
/*('ele', {
template: '<div :class="{show: show}" @click="handleClick">text</div>',
data: function() {
return {
show: true
}
},
methods: {
handleClick: function() {
('clicked!');
}
}
});*/
('ele', {
render: function(createElement) {
return createElement('div', {
'class': {
show:
},
attrs: {
id: 'elem'
},
on: {
click:
}
}, 'text');
},
data: function() {
return {
show: true
}
},
methods: {
handleClick: function() {
('clicked!');
}
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
This.$slots usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="/vue/2.3.4/"></script>
</head>
<body>
<div >
<blog-post>
<h1 slot="header"><span>About Me</span></h1>
<p>Here's some page content</p>
<p slot="footer">Copyright 2016 Evan You</p>
<p>If I have some content down here</p>
</blog-post>
</div>
<script>
('blog-post', {
render: function(createElement) {
var header = this.$,//Return an array composed of VNode body = this.$,
footer = this.$;
return createElement('div', [
createElement('header', header),
createElement('main', body),
createElement('footer', footer)
])
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
Passing data using props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="/vue/2.3.4/"></script>
</head>
<body>
<div >
<ele :show="show"></ele>
<ele :show="!show"></ele>
</div>
<script>
('ele', {
render: function(createElement) {
if () {
return createElement('p', 'true');
} else {
return createElement('p', 'false');
}
},
props: {
show: {
type: Boolean,
default: false
}
}
});
new Vue({
el: '#app',
data: {
show: false
}
});
</script>
</body>
</html>
VNodes must be unique
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="/vue/2.3.4/"></script>
</head>
<body>
<!-- VNodeMust be unique -->
<div >
<ele></ele>
</div>
<script>
var child = {
render: function(createElement) {
return createElement('p', 'text');
}
};
/*('ele', {
render: function(createElement) {
var childNode = createElement(child);
return createElement('div', [
childNode, childNode//VNodes must be unique, rendering fails
]);
}
});*/
('ele', {
render: function(createElement) {
return createElement('div',
(null, {
length: 2
}).map(function() {
return createElement(child)//Correct writing })
);
}
});
new Vue({
el: '#app'
})
</script>
</body>
</html>
v-model command
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="/vue/2.3.4/"></script>
</head>
<body>
<div >
<el-input :name="name" @input="val=>name=val"></el-input>
<div>Your name is{{name}}</div>
</div>
<script>
('el-input', {
render: function(createElement) {
var self = this;
return createElement('input', {
domProps: {
value:
},
on: {
input: function(event) {
self.$emit('input', );
}
}
})
},
props: {
name: String
}
});
new Vue({
el: '#app',
data: {
name: 'hdl'
}
});
</script>
</body>
</html>
Scope slots
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="/vue/2.3.4/"></script>
</head>
<body>
<div >
<ele>
<template scope="props">
<span>{{}}</span>
</template>
</ele>
</div>
<script>
('ele', {
render: function(createElement) {
// Equivalent to <div><slot :text="msg"></slot></div> return createElement('div', [
this.$({
text:
})
]);
},
data: function() {
return {
msg: 'From a child component'
}
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
Pass scope slots into subcomponents
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="/vue/2.3.4/"></script>
</head>
<body>
<div >
<ele></ele>
</div>
<script>
('ele', {
render: function(createElement) {
return createElement('div', [
createElement('child', {
scopedSlots: {
default: function(props) {
return [
createElement('span', 'From the parent component'),
createElement('span', )
];
}
}
})
]);
}
});
('child', {
render: function(createElement) {
return createElement('b', this.$({text: 'I am a component'}));
}
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
Functional components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>render</title>
<script src="/vue/2.3.4/"></script>
</head>
<body>
<div >
<smart-item :data="data"></smart-item>
<button @click="change('img')">Switch to picture as component</button>
<button @click="change('video')">Switch to video as component</button>
<button @click="change('text')">Switch to text component</button>
</div>
<script>
// Picture component options var ImgItem = {
props: ['data'],
render: function(createElement) {
return createElement('div', [
createElement('p', 'Picture Component'),
createElement('img', {
attrs: {
src:
}
})
]);
}
}
// Video component var VideoItem = {
props: ['data'],
render: function(createElement) {
return createElement('div', [
createElement('p', 'Video Component'),
createElement('video', {
attrs: {
src: ,
controls: 'controls',
autoplay: 'autoplay'
}
})
]);
}
};
/*Plain text component*/
var TextItem = {
props: ['data'],
render: function(createElement) {
return createElement('div', [
createElement('p', 'Pure text component'),
createElement('p', )
]);
}
};
('smart-item', {
functional: true,
render: function(createElement, context) {
function getComponent() {
var data = ;
if ( === 'img') return ImgItem;
if ( === 'video') return VideoItem;
return TextItem;
}
return createElement(
getComponent(),
{
props: {
data:
}
},
)
},
props: {
data: {
type: Object,
required: true
}
}
});
new Vue({
el: '#app',
data() {
return {
data: {}
}
},
methods: {
change: function(type) {
if (type === 'img') {
= {
type: 'img',
url: '/iview/iview/master/assets/'
}
} else if (type === 'video') {
= {
type: 'video',
url: '/v/oceans.mp4'
}
} else if (type === 'text') {
= {
type: 'text',
content: 'This is a plain text'
}
}
}
},
created: function() {
('img');
}
});
</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.