vue 如何实现高阶组件

Question

vue 如何实现高阶组件，请老师明说吧？

Answer 1

双越 2021-02-01 12:55:14

vue 可以使用 render 函数来代替 template，这样就和 React 差不多了，例如：

const withPromise = (wrapped) => {
  return {
    data() { ... },
    mounted() { ... },
    render(h) {
      return h(wrapped, {
        props: {
          result: this.result,
          loading: this.loading,
        },
      });
    },
  };
};

以上 withPromise 就是一个高阶组件，接受一个组件 warapped ，返回一个新的组件。

• 提问者 斜杠男人 #1

  1.HOC和vue的render函数相似，那render props呢？
  
  2.我感觉HOC像vue的插槽，render props像vue的作用域插槽，他们有什么具体区别啊？

• 双越 回复 提问者 斜杠男人 #2

  第一，vue 既然支持 render 函数，render props 也是可以实现的，但不建议这样用，毕竟 vue 和 React 都有各自不同的使用习惯，不要太“个性”，否则你写的代码别人不易看懂。
  第二，插槽是 vue 给定义好的，开发者按照 vue 文档来即可，而 HOC 和 render props 需要开发者自己实现。