【vue】Render函数 实用代码

重复渲染多个组件（或元素）的方法

<div id="app">
	<ele></ele>
</div>
<script>
	//局部声明组件
	var Child = {
		render: function (createElement) {
			return createElement('p', 'text');
		}
	};
	Vue.component('ele',{
		render: function (createElement) {
			Array.apply(null, {
				length: 5
			 }).map(function() {
					return createElement(Child);
				})
			);
		}
	});
	var app = new Vue({
		el: '#app'
	})
</script>

在Render函数内部自己实现v-model的逻辑

<div id="app">
	<ele></ele>
</div>
<script>
	Vue.component('ele', {
		render: function (createElement) {
			var _this = this;
			return createElement('div', [
					createElement('input', {
							domProps: {
									value: this.value
								},
								on: {
										input: function (event) {
											_this.value = event.target.value;
										}
									}
						}),
						createElement('p', 'value:'+this.value)
				])
		},
		data: function(){
			return {
				value: ''
			}
		}
	});
	
	var app = new Vue({
		el: '#app'
	})
</script>