在Vue template 中使用VNode(JSX)

情景

使用vue 封装一个table组件。希望参考antd-design-vue 的表格一样，传入customCell / customHeaderCell: () => VNode 自定义表头。

使用插槽的话，会影响所有表头。修改某个表头的话，需要在插槽中判断。

使用 vNode的话，可以只修改需要改变的表头。

代码（vue3）

使用vue 的component 组件发现可接收VNode

/**表格代码*/

import { h } from 'vue';
col.customHeaderCell(column){
  return h('span', column.title + 'render'); // 这里就可返回jsx
}
// 可以返回一个.vue 组件
col.customHeaderCell(column){
  return defineComponent({...})
}

代码（vue2）

vue2的component is接收VueComponent，也类似一个.vue组件，因此，需要通过optionalApi，配合render函数，创建一个VueComponent对象

col.customHeaderCell(column){
  return {
    // 这里可以写vue的optional API (methods)
    render(h){
      return h('span', column.title + 'render'); 
      // 这里也可返回jsx，但是render的形参'h'不能去除
      return {column.title + 'render'}
    }
  }

}