render 函数初识

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiejunna/article/details/85345298

这是最初看到render函数的样子，完全不明白这是怎么回事，于是乎各种查资料，
使用场景：web前端界面头布局中，可以重复使用 来接收每一个级别的标题标签，在标题标签中添加相同的锚点元素。但是些都会被包裹在一个无用的 div 中，因为组件必须有根节点。虽然模板在大多数组件中都非常好用，但是在这里它就不是很简洁的了。 render 函数就派上用场了

<script>
Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
</script>

createElement 参数

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

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签，组件设置，或一个函数
  // 必须 Return 上述其中一个
  'div',

  // {Object}
  // 一个对应属性的数据对象
  // 您可以在 template 中使用.可选项.
  {
    // (下一章，将详细说明相关细节)
  },

  // {String | Array}
  // 子节点(VNodes). 可选项.
  [
    createElement('h1', 'hello world'),
    createElement(MyComponent, {
      props: {
        someProp: 'foo'
      }
    }),
    'bar'
  ]
)

语法：
// `h` 作为 `createElement` 的别名是一个通用惯例
render:(h,params) => {
  return h(" 定义的元素 "，{ 元素的性质 }，" 元素的内容"/[元素的内容])
}
示例：
render:(h,params)=>{
    return h('div', {style:{width:'100px',height:'100px',background:'#ccc'}}, '地方')
}