createElement render选项与h函数

指定组件显示的内容：new Vue({选项}) el 选项，通过一个选择器找到容器，容器内容就是组件内容 template选项，<div>组件内容</div> 作为组件内容
render选项，它是一个函数，函数回默认传人createElement的函数（h），这个函数用来创建结构，再render函数返回渲染为组件内容。它的优先级更高。

//import App from './App.vue'
//new Vue({
//    render:h=>h(App)
//}).mount('#app')
// h() =====>  createElement()
// h(App) =====>  根据APP组件创建html结构
// render的返回值就是html结构，渲染到#app容器
// h() 函数参数，1.节点名称  2. 属性|数据 是对象  3. 子节点

 render () {
    // 用法
    // 1. template 标签去除，单文件组件
    // 2. 返回值就是组件内容
    // 3. vue2.0 的h函数传参进来的，vue3.0 的h函数导入进来
    // 4. h 第一个参数 标签名字  第二个参数 标签属性对象  第三个参数 子节点
    // 需求
    // 1. 创建xtx-bread父容器
    // 2. 获取默认插槽内容
    // 3. 去除xtx-bread-item组件的i标签，因该由render函数来组织
    // 4. 遍历插槽中的item，得到一个动态创建的节点，最后一个item不加i标签
    // 5. 把动态创建的节点渲染再xtx-bread标签中
    const items = this.$slots.default()
    const dymanicItems = []
    items.forEach((item, i) => {
      dymanicItems.push(item)
      if (i < (items.length - 1)) {
        dymanicItems.push(h('i', { class: 'iconfont icon-angle-right' }))
      }
    })
    return h('div', { class: 'xtx-bread' }, dymanicItems)
  }

总结，一下知识点
render 是vue提供的一个渲染函数，优先级大于el,template等选项，用来提供组件结构。
注意：
vue2.0 render函数提供h（createElement）函数用来创建节点
vue3.0 h（createElement）函数有 vue 直接提供，需要按需导入
this.$slots.default() 获取默认插槽的node结构，按照要求拼接结构。
h函数的传参 tag 标签名|组件名称, props 标签属性|组件属性, node 子节点|多个节点
具体参考 render
注意：不要在 xtx-bread 组件插槽写注释，也会被解析。