第一个参数(必须) - {String | Object | Function}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>render</title> <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> </head> <body> <div> <elem></elem> </div> <script> Vue.component('elem', { render: function(createElement) { return createElement('div');//一个HTML标签字符 /*return createElement({ template: '<div></div>'//组件选项对象 });*/ /*var func = function() { return {template: '<div></div>'} }; return createElement(func());//一个返回HTML标签字符或组件选项对象的函数*/ } }); new Vue({ el: '#app' }); </script> </body> </html>
第二个参数(可选) - {Object}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>render</title> <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> </head> <body> <div> <elem></elem> </div> <script> Vue.component('elem', { render: function(createElement) { var self = this; return createElement('div', {//一个包含模板相关属性的数据对象 'class': { foo: true, bar: false }, style: { color: 'red', fontSize: '14px' }, attrs: { id: 'foo' }, domProps: { innerHTML: 'baz' } }); } }); new Vue({ el: '#app' }); </script> </body> </html>
第三个参数(可选) - {String | Array}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>render</title> <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> </head> <body> <div> <elem></elem> </div> <script> Vue.component('elem', { render: function(createElement) { var self = this; // return createElement('div', '文本');//使用字符串生成文本节点 return createElement('div', [//由createElement函数构建而成的数组 createElement('h1', '主标'),//createElement函数返回VNode对象 createElement('h2', '副标') ]); } }); new Vue({ el: '#app' }); </script> </body> </html>
两种组件写法对比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>render</title> <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> </head> <body> <div> <ele></ele> </div> <script> /*Vue.component('ele', { template: '<div :class="{show: show}" @click="handleClick">文本</div>', data: function() { return { show: true } }, methods: { handleClick: function() { console.log('clicked!'); } } });*/ Vue.component('ele', { render: function(createElement) { return createElement('div', { 'class': { show: this.show }, attrs: { id: 'elem' }, on: { click: this.handleClick } }, '文本'); }, data: function() { return { show: true } }, methods: { handleClick: function() { console.log('clicked!'); } } }); new Vue({ el: '#app' }); </script> </body> </html>
this.$slots用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>render</title> <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></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> Vue.component('blog-post', { render: function(createElement) { var header = this.$slots.header,//返回由VNode组成的数组 body = this.$slots.default, footer = this.$slots.footer; return createElement('div', [ createElement('header', header), createElement('main', body), createElement('footer', footer) ]) } }); new Vue({ el: '#app' }); </script> </body> </html>
使用props传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>render</title> <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> </head> <body> <div> <ele :show="show"></ele> <ele :show="!show"></ele> </div> <script> Vue.component('ele', { render: function(createElement) { if (this.show) { 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必须唯一