【vue】render 函数学习总结

在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。

createElement 函数中生成模板。这里是 createElement接受的参数：

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者一个返回值
  // 类型为 String/Object 的函数，必要参数
  'div',

  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样，您可以在 template 中使用这些属性。可选参数。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子节点 (VNodes)，由 `createElement()` 构建而成，
  // 或使用字符串来生成“文本节点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

1）render 函数中没有与 v-model 相应的 api - 你必须自己来实现相应的逻辑：

  <div id="app">
  {{name}}
  <my-input v-model="name" :value="name"></my-input> <!--此处value绑定name页面一开始就会有默认值-->
  </div>
<script>
   Vue.component('my-input',{
			 render: function (createElement) {
				  var self = this
				  return createElement('input', {
				    domProps: {
				      value: self.value
				    },
				    on: {
				      input: function (event) {
				        self.$emit('input', event.target.value)
				      }
				    }
	 })
      }
   })

  let vm=new Vue({
  	el:'#app',
  	data:{
  		name:'zx'
  	}
  })

</script>

实例创建一个input组件进行value值的绑定更改。

2)