Render函数

 

 1 Vue.component('anchored-heading', {
 2   render: function (createElement) {
 3     return createElement(
 4       'h' + this.level,   // tag name 标签名称
 5       this.$slots.default // 子组件中的阵列
 6     )
 7   },
 8   props: {
 9     level: {
10       type: Number,
11       required: true
12     }
13   }
14 })

 

看官方文档最初的例子还是看的懂得，就是到后来render函数内容一多，就有点懵了，分不清什么是什么了

 1 Vue.component('anchored-heading', {
 2   render: function (createElement) {
 3     // create kebabCase id
 4     var headingId = getChildrenTextContent(this.$slots.default)
 5       .toLowerCase()
 6       .replace(/\W+/g, '-')
 7       .replace(/(^\-|\-$)/g, '')
 8     return createElement(
 9       'h' + this.level,
10       [
11         createElement('a', {
12           attrs: {
13             name: headingId,
14             href: '#' + headingId
15           }
16         }, this.$slots.default)
17       ]
18     )
19   },
20   props: {
21     level: {
22       type: Number,
23       required: true
24     }
25   }
26 })

后来再看多几遍，重点都在createElement函数的参数上，就如文档所给出的那样，细细分开就恍然大悟了

 1 createElement(
 2   // {String | Object | Function}
 3   // 一个 HTML 标签，组件选项，或一个函数
 4   // 必须 Return 上述其中一个
 5   'div',
 6   // {Object}
 7   // 一个对应属性的数据对象
 8   // 您可以在 template 中使用.可选项.
 9   {
10     // (下一章，将详细说明相关细节)
11   },
12   // {String | Array}
13   // 子节点(VNodes). 可选项.
14   [
15     createElement('h1', 'hello world'),
16     createElement(MyComponent, {
17       props: {
18         someProp: 'foo'
19       }
20     }),
21     'bar'
22   ]
23 )

再回头分析刚刚不懂的，其实也就是看懂其返回的函数，一个“h+this.level”标签，再在其内部创建一个a标签，a标签的属性值都在attrs中，包括name属性、href属性，而this.$slots.default就是该文本的值。

听听前辈的话，来记录一下自己的学习之路