vue2函数式组件与vue3中如何修复函数式组件带来的问题

vue2

简单介绍一下vue2中的函数式组件

1. 在vue2中有函数式组件；如何实现呢，使用 functional 设置为 true 就行了，则当前组件为函数式；
2. 函数式组件内它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)；但是render第二个参数可以获取到参数
3. 以 el-table 实现h函数举例：如下

const Render = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    };
    if (data.props.column) params.column = data.props.column;
    return data.props.render(h, params);
  }
};
Vue.component('Render', Render)

但是函数式组件在 vue3 中已经被剔除了

vue3 兼容以前代码则只需要

1. 从 vue 中引入 h 函数
2. 然后render的第二个参数 data 去掉；函数内容中 data 更换为 this 就行了（温馨提示： vue3中兼容vue2的写法）
3. 如果篇幅data过多则把 this 赋值給 data（const data = this）;减少全局更改；

import { h } from 'vue';
const Render = {
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: function() {
    const params = {
      row: this.row,
      index: this.index
    };
    if (this.column) params.column = this.column;
    return this.render(h, params);
  }
};
Vue.component('Render', Render)