Render

render 函数的基本用法

export default {
  // ...
  rende(h) {
    // 参数1为 domTag
    // 如果子元素为字符串可以直接放在第二个参数，或者是一个配置对象
    // 子元素 String | Array
    h('div', props, vnode);
  }
}

2. render 里的配置项

export default {
  // ...
  render(h) {
    return h('div',
      {
        slot: 'default', // 
        ref: 'render',
        refInFor: true,
        key: 'key',
        style: {}, // 内联样式
        class: {}, // className
        props: {}, // $props
        attrs: {}, // $attrs
        on: {}, // 自定义事件
        nativeOn: {}, // 原生事件
        domProps: { // 处理原生 dom 的属性
          innerHTML: 'bar'
        },
        directives: [ // 处理指令
          { name: 'show', value: true }
        ],
        scopeSlots: {
          // 处理作用域插槽
          default: props => h('span', '作用域插槽')
        }
      },
      this.$slots.default // 使用插槽
    )
  }
}

render 里的 v-for

• 使用map方法代替

export default {
  data() {
    return {
      children: [1, 2]
    }
  },
  render(h) {
    return h('ul', null, this.children.map(li => {
      return h('li', { key: li }, '子元素')
    }))
  }
}

函数式组件的 render

• 定义函数式组件

<template functional></template>
<!-- 或者 -->
<script>
export default {
  // ...
  functional: true
}
</script>

• render 有两个参数
  • h：构建虚拟Dom函数
  • context：函数式组件的上下文，包括：
    • props: 可以等价于$prop
    • children：VNode子节点的数组
    • slots：一个函数，返回所有的插槽对象
    • scopeSlots(2.6.0+)：一个暴露传入的作用域插槽对象
    • data：包括
      • attrs：可以等价于$attrs
      • on：可以等价于$listeners
    • parent：父组件的应用
    • listeners(2.3.0+)：是data.on的一个别名
    • injections(2.3.0+)：如果使用了inject属性则包含对应的属性