vue 高阶组件

vue 高阶组件

关于vue高阶组件的内容很多，这里介绍一种取巧的方式实现类似高阶组件的效果，思路也很简单，将目标组件props拿出来绑定上默认数据再放回去就可以了。

代码如下

/**
 * vhoc
 */
const copy = (...args) => Object.assign({}, ...args);

const mergeProps = (component, part) => {
  const origin = component.props;
  if (origin === undefined || Array.isArray(origin)) {
    return origin;
  }
  const props = copy(origin);
  Object.keys(part).forEach((key) => {
    if (props[key]) {
      props[key] = copy(props[key]);
      props[key].default =
        typeof part[key] === "object" ? () => part[key] : part[key];
      props[key].required = false;
    }
  });
  return props;
};

export const connect = (component) => {
  return function inject(part) {
    if (component.props) {
      const props = mergeProps(component, part);
      return copy(component, { props });
    } else {
      return component;
    }
  };
};

使用方式

const NewComponent = connect(Component)({
  prop1: 'prop1',
  prop2: 'prop2',
  // ...

});

// NewComponent.name = 'NewComponent' // 可选

vue2/3 都可以使用