vue 如何实现高阶组件

Question

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

Answer 1

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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 需要开发者自己实现。